TabControlPage.xaml 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <UserControl
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. x:Class="ControlCatalog.Pages.TabControlPage"
  4. xmlns="https://github.com/avaloniaui">
  5. <DockPanel>
  6. <TextBlock
  7. DockPanel.Dock="Top"
  8. Classes="h2"
  9. Text="A tab control that displays a tab strip along with the content of the selected tab"
  10. Margin="4">
  11. </TextBlock>
  12. <Grid
  13. ColumnDefinitions="*,*"
  14. RowDefinitions="*,100">
  15. <DockPanel
  16. Grid.Column="0"
  17. Margin="4">
  18. <TextBlock
  19. DockPanel.Dock="Top"
  20. Classes="h1"
  21. Text="From Inline TabItems">
  22. </TextBlock>
  23. <TabControl
  24. Margin="0 16"
  25. TabStripPlacement="{Binding TabPlacement}">
  26. <TabItem Header="Arch">
  27. <StackPanel Orientation="Vertical" Spacing="8">
  28. <TextBlock>This is the first page in the TabControl.</TextBlock>
  29. <Image Source="/Assets/delicate-arch-896885_640.jpg" Width="300"/>
  30. </StackPanel>
  31. </TabItem>
  32. <TabItem Header="Leaf">
  33. <StackPanel Orientation="Vertical" Spacing="8">
  34. <TextBlock>This is the second page in the TabControl.</TextBlock>
  35. <Image Source="/Assets/maple-leaf-888807_640.jpg" Width="300"/>
  36. </StackPanel>
  37. </TabItem>
  38. <TabItem Header="Disabled" IsEnabled="False">
  39. <TextBlock>You should not see this.</TextBlock>
  40. </TabItem>
  41. </TabControl>
  42. </DockPanel>
  43. <DockPanel
  44. Grid.Column="1"
  45. Margin="4">
  46. <TextBlock
  47. DockPanel.Dock="Top"
  48. Classes="h1"
  49. Text="From DataTemplate">
  50. </TextBlock>
  51. <TabControl
  52. Items="{Binding Tabs}"
  53. Margin="0 16"
  54. TabStripPlacement="{Binding TabPlacement}">
  55. <TabControl.ItemTemplate>
  56. <DataTemplate>
  57. <TextBlock
  58. Text="{Binding Header}">
  59. </TextBlock>
  60. </DataTemplate>
  61. </TabControl.ItemTemplate>
  62. <TabControl.ContentTemplate>
  63. <DataTemplate>
  64. <StackPanel Orientation="Vertical" Spacing="8">
  65. <TextBlock Text="{Binding Text}"/>
  66. <Image Source="{Binding Image}" Width="300"/>
  67. </StackPanel>
  68. </DataTemplate>
  69. </TabControl.ContentTemplate>
  70. <TabControl.Styles>
  71. <Style Selector="TabItem">
  72. <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
  73. </Style>
  74. </TabControl.Styles>
  75. </TabControl>
  76. </DockPanel>
  77. <StackPanel
  78. Grid.Row="1"
  79. Grid.ColumnSpan="2"
  80. Orientation="Horizontal"
  81. Spacing="8"
  82. HorizontalAlignment="Center"
  83. VerticalAlignment="Center">
  84. <TextBlock VerticalAlignment="Center">Tab Placement:</TextBlock>
  85. <ComboBox SelectedIndex="{Binding TabPlacement, Mode=TwoWay}">
  86. <ComboBoxItem>Left</ComboBoxItem>
  87. <ComboBoxItem>Bottom</ComboBoxItem>
  88. <ComboBoxItem>Right</ComboBoxItem>
  89. <ComboBoxItem>Top</ComboBoxItem>
  90. </ComboBox>
  91. </StackPanel>
  92. </Grid>
  93. </DockPanel>
  94. </UserControl>