TabControlPage.xaml 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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. xmlns:viewModels="using:ControlCatalog.ViewModels"
  6. x:DataType="viewModels:TabControlPageViewModel">
  7. <DockPanel Classes.WithContentTemplates="{Binding IsChecked, ElementName=UseContentTemplates}">
  8. <DockPanel.Styles>
  9. <Style Selector="DockPanel.WithContentTemplates">
  10. <Style Selector="^ TabItem">
  11. <Setter Property="ContentTemplate">
  12. <DataTemplate x:CompileBindings="False">
  13. <Border BorderBrush="Red" BorderThickness="10">
  14. <ContentPresenter Content="{Binding}"/>
  15. </Border>
  16. </DataTemplate>
  17. </Setter>
  18. </Style>
  19. <Style Selector="^ TabControl">
  20. <Setter Property="ContentTemplate">
  21. <DataTemplate>
  22. <TextBlock Text="This template should be overriden by each TabItem's template."/>
  23. </DataTemplate>
  24. </Setter>
  25. </Style>
  26. </Style>
  27. </DockPanel.Styles>
  28. <TextBlock
  29. DockPanel.Dock="Top"
  30. Classes="h2"
  31. Text="A tab control that displays a tab strip along with the content of the selected tab"
  32. Margin="4">
  33. </TextBlock>
  34. <Grid
  35. ColumnDefinitions="*,*"
  36. RowDefinitions="*,100">
  37. <DockPanel
  38. Grid.Column="0"
  39. Margin="4">
  40. <TextBlock
  41. DockPanel.Dock="Top"
  42. Classes="h1"
  43. Text="From Inline TabItems">
  44. </TextBlock>
  45. <TabControl
  46. Margin="0 16"
  47. TabStripPlacement="{Binding TabPlacement}">
  48. <TabItem Header="_Arch">
  49. <StackPanel Orientation="Vertical" Spacing="8">
  50. <TextBlock>This is the first page in the TabControl.</TextBlock>
  51. <Image Source="/Assets/delicate-arch-896885_640.jpg" Width="300"/>
  52. </StackPanel>
  53. </TabItem>
  54. <TabItem Header="_Leaf">
  55. <StackPanel Orientation="Vertical" Spacing="8">
  56. <TextBlock>This is the second page in the TabControl.</TextBlock>
  57. <Image Source="/Assets/maple-leaf-888807_640.jpg" Width="300"/>
  58. </StackPanel>
  59. </TabItem>
  60. <TabItem Header="_Disabled" IsEnabled="False">
  61. <TextBlock>You should not see this.</TextBlock>
  62. </TabItem>
  63. </TabControl>
  64. </DockPanel>
  65. <DockPanel
  66. Grid.Column="1"
  67. Margin="4">
  68. <TextBlock
  69. DockPanel.Dock="Top"
  70. Classes="h1"
  71. Text="From DataTemplate">
  72. </TextBlock>
  73. <TabControl
  74. ItemsSource="{Binding Tabs}"
  75. Margin="0 16"
  76. DisplayMemberBinding="{Binding Header, x:DataType=viewModels:TabControlPageViewModelItem}"
  77. TabStripPlacement="{Binding TabPlacement}">
  78. <TabControl.DataTemplates>
  79. <DataTemplate x:DataType="viewModels:TabControlPageViewModelItem">
  80. <StackPanel Orientation="Vertical" Spacing="8">
  81. <TextBlock Text="{Binding Text}"/>
  82. <Image Source="{Binding Image}" Width="300"/>
  83. </StackPanel>
  84. </DataTemplate>
  85. </TabControl.DataTemplates>
  86. <TabControl.Styles>
  87. <Style Selector="TabItem" x:DataType="viewModels:TabControlPageViewModelItem">
  88. <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
  89. </Style>
  90. </TabControl.Styles>
  91. </TabControl>
  92. </DockPanel>
  93. <StackPanel
  94. Grid.Row="1"
  95. Grid.ColumnSpan="2"
  96. Orientation="Horizontal"
  97. Spacing="8"
  98. HorizontalAlignment="Center"
  99. VerticalAlignment="Center">
  100. <TextBlock VerticalAlignment="Center">Tab Placement:</TextBlock>
  101. <ComboBox SelectedIndex="{Binding TabPlacement, Mode=TwoWay}" Width="100">
  102. <ComboBoxItem>Left</ComboBoxItem>
  103. <ComboBoxItem>Bottom</ComboBoxItem>
  104. <ComboBoxItem>Right</ComboBoxItem>
  105. <ComboBoxItem>Top</ComboBoxItem>
  106. </ComboBox>
  107. <CheckBox Name="UseContentTemplates">Set TabItem.ContentTemplate</CheckBox>
  108. </StackPanel>
  109. </Grid>
  110. </DockPanel>
  111. </UserControl>