A cross-platform UI framework for .NET
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

90 lines
4.0 KiB

<UserControl
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ControlCatalog.Pages.TabControlPage"
xmlns="https://github.com/avaloniaui"
xmlns:viewModels="using:ControlCatalog.ViewModels"
x:DataType="viewModels:TabControlPageViewModel">
<DockPanel>
<TextBlock
DockPanel.Dock="Top"
Classes="h2"
Text="A tab control that displays a tab strip along with the content of the selected tab"
Margin="4">
</TextBlock>
<Grid
ColumnDefinitions="*,*"
RowDefinitions="*,100">
<DockPanel
Grid.Column="0"
Margin="4">
<TextBlock
DockPanel.Dock="Top"
Classes="h1"
Text="From Inline TabItems">
</TextBlock>
<TabControl
Margin="0 16"
TabStripPlacement="{Binding TabPlacement}">
<TabItem Header="Arch">
<StackPanel Orientation="Vertical" Spacing="8">
<TextBlock>This is the first page in the TabControl.</TextBlock>
<Image Source="/Assets/delicate-arch-896885_640.jpg" Width="300"/>
</StackPanel>
</TabItem>
<TabItem Header="Leaf">
<StackPanel Orientation="Vertical" Spacing="8">
<TextBlock>This is the second page in the TabControl.</TextBlock>
<Image Source="/Assets/maple-leaf-888807_640.jpg" Width="300"/>
</StackPanel>
</TabItem>
<TabItem Header="Disabled" IsEnabled="False">
<TextBlock>You should not see this.</TextBlock>
</TabItem>
</TabControl>
</DockPanel>
<DockPanel
Grid.Column="1"
Margin="4">
<TextBlock
DockPanel.Dock="Top"
Classes="h1"
Text="From DataTemplate">
</TextBlock>
<TabControl
Items="{Binding Tabs}"
Margin="0 16"
DisplayMemberBinding="{Binding Header, x:DataType=viewModels:TabControlPageViewModelItem}"
TabStripPlacement="{Binding TabPlacement}">
<TabControl.ContentTemplate>
<DataTemplate x:DataType="viewModels:TabControlPageViewModelItem">
<StackPanel Orientation="Vertical" Spacing="8">
<TextBlock Text="{Binding Text}"/>
<Image Source="{Binding Image}" Width="300"/>
</StackPanel>
</DataTemplate>
</TabControl.ContentTemplate>
<TabControl.Styles>
<Style Selector="TabItem" x:DataType="viewModels:TabControlPageViewModelItem">
<Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
</Style>
</TabControl.Styles>
</TabControl>
</DockPanel>
<StackPanel
Grid.Row="1"
Grid.ColumnSpan="2"
Orientation="Horizontal"
Spacing="8"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock VerticalAlignment="Center">Tab Placement:</TextBlock>
<ComboBox SelectedIndex="{Binding TabPlacement, Mode=TwoWay}">
<ComboBoxItem>Left</ComboBoxItem>
<ComboBoxItem>Bottom</ComboBoxItem>
<ComboBoxItem>Right</ComboBoxItem>
<ComboBoxItem>Top</ComboBoxItem>
</ComboBox>
</StackPanel>
</Grid>
</DockPanel>
</UserControl>