TabControlPage.xaml 4.0 KB

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