TabControlPage.xaml 4.2 KB

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