Steven Kirk
7 years ago
committed by
GitHub
GitHub
17 changed files with 788 additions and 321 deletions
@ -0,0 +1,124 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui"> |
|||
<DockPanel> |
|||
<TextBlock |
|||
DockPanel.Dock="Top" |
|||
Classes="h1" |
|||
Text="TabControl" |
|||
Margin="4"> |
|||
</TextBlock> |
|||
<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> |
|||
<TabItem.Header> |
|||
<TextBlock |
|||
Text="Arch" |
|||
VerticalAlignment="Center" |
|||
HorizontalAlignment="Center" |
|||
Margin="8"> |
|||
</TextBlock> |
|||
</TabItem.Header> |
|||
<StackPanel Orientation="Vertical" Spacing="8"> |
|||
<TextBlock>This is the first page in the TabControl.</TextBlock> |
|||
<Image Source="resm:ControlCatalog.Assets.delicate-arch-896885_640.jpg" Width="300"/> |
|||
</StackPanel> |
|||
</TabItem> |
|||
<TabItem> |
|||
<TabItem.Header> |
|||
<TextBlock |
|||
Text="Leaf" |
|||
VerticalAlignment="Center" |
|||
HorizontalAlignment="Center" |
|||
Margin="8"> |
|||
</TextBlock> |
|||
</TabItem.Header> |
|||
<StackPanel Orientation="Vertical" Spacing="8"> |
|||
<TextBlock>This is the second page in the TabControl.</TextBlock> |
|||
<Image Source="resm:ControlCatalog.Assets.maple-leaf-888807_640.jpg" Width="300"/> |
|||
</StackPanel> |
|||
</TabItem> |
|||
<TabItem IsEnabled="False"> |
|||
<TabItem.Header> |
|||
<TextBlock |
|||
Text="Disabled" |
|||
VerticalAlignment="Center" |
|||
HorizontalAlignment="Center" |
|||
Margin="8"> |
|||
</TextBlock> |
|||
</TabItem.Header> |
|||
<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" |
|||
TabStripPlacement="{Binding TabPlacement}"> |
|||
<TabControl.ItemTemplate> |
|||
<DataTemplate> |
|||
<TextBlock |
|||
Text="{Binding Header}" |
|||
VerticalAlignment="Center" |
|||
HorizontalAlignment="Center" |
|||
Margin="8"> |
|||
</TextBlock> |
|||
</DataTemplate> |
|||
</TabControl.ItemTemplate> |
|||
<TabControl.ContentTemplate> |
|||
<DataTemplate> |
|||
<StackPanel Orientation="Vertical" Spacing="8"> |
|||
<TextBlock Text="{Binding Text}"/> |
|||
<Image Source="{Binding Image}" Width="300"/> |
|||
</StackPanel> |
|||
</DataTemplate> |
|||
</TabControl.ContentTemplate> |
|||
<TabControl.Styles> |
|||
<Style Selector="TabItem"> |
|||
<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> |
|||
<DropDown SelectedIndex="{Binding TabPlacement, Mode=TwoWay}"> |
|||
<DropDownItem>Left</DropDownItem> |
|||
<DropDownItem>Bottom</DropDownItem> |
|||
<DropDownItem>Right</DropDownItem> |
|||
<DropDownItem>Top</DropDownItem> |
|||
</DropDown> |
|||
</StackPanel> |
|||
</Grid> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,80 @@ |
|||
using System; |
|||
|
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Markup.Xaml; |
|||
using Avalonia.Media.Imaging; |
|||
using Avalonia.Platform; |
|||
|
|||
using ReactiveUI; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
using System.Collections.Generic; |
|||
|
|||
public class TabControlPage : UserControl |
|||
{ |
|||
public TabControlPage() |
|||
{ |
|||
InitializeComponent(); |
|||
|
|||
DataContext = new PageViewModel |
|||
{ |
|||
Tabs = new[] |
|||
{ |
|||
new TabItemViewModel |
|||
{ |
|||
Header = "Arch", |
|||
Text = "This is the first templated tab page.", |
|||
Image = LoadBitmap("resm:ControlCatalog.Assets.delicate-arch-896885_640.jpg?assembly=ControlCatalog"), |
|||
}, |
|||
new TabItemViewModel |
|||
{ |
|||
Header = "Leaf", |
|||
Text = "This is the second templated tab page.", |
|||
Image = LoadBitmap("resm:ControlCatalog.Assets.maple-leaf-888807_640.jpg?assembly=ControlCatalog"), |
|||
}, |
|||
new TabItemViewModel |
|||
{ |
|||
Header = "Disabled", |
|||
Text = "You should not see this.", |
|||
IsEnabled = false, |
|||
}, |
|||
}, |
|||
TabPlacement = Dock.Top, |
|||
}; |
|||
} |
|||
|
|||
private void InitializeComponent() |
|||
{ |
|||
AvaloniaXamlLoader.Load(this); |
|||
} |
|||
|
|||
private IBitmap LoadBitmap(string uri) |
|||
{ |
|||
var assets = AvaloniaLocator.Current.GetService<IAssetLoader>(); |
|||
return new Bitmap(assets.Open(new Uri(uri))); |
|||
} |
|||
|
|||
private class PageViewModel : ReactiveObject |
|||
{ |
|||
private Dock _tabPlacement; |
|||
|
|||
public TabItemViewModel[] Tabs { get; set; } |
|||
|
|||
public Dock TabPlacement |
|||
{ |
|||
get { return _tabPlacement; } |
|||
set { this.RaiseAndSetIfChanged(ref _tabPlacement, value); } |
|||
} |
|||
} |
|||
|
|||
private class TabItemViewModel |
|||
{ |
|||
public string Header { get; set; } |
|||
public string Text { get; set; } |
|||
public IBitmap Image { get; set; } |
|||
public bool IsEnabled { get; set; } = true; |
|||
} |
|||
} |
|||
} |
|||
@ -1,52 +1,67 @@ |
|||
<Styles xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > |
|||
<Style Selector="TabControl.sidebar"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<DockPanel> |
|||
<ScrollViewer MinWidth="190" Background="{DynamicResource ThemeAccentBrush}" DockPanel.Dock="Left"> |
|||
<TabStrip Name="PART_TabStrip" |
|||
MemberSelector="{x:Static TabControl.HeaderSelector}" |
|||
Items="{TemplateBinding Items}" |
|||
SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}"> |
|||
<TabStrip.ItemsPanel> |
|||
<ItemsPanelTemplate> |
|||
<StackPanel Orientation="Vertical"/> |
|||
</ItemsPanelTemplate> |
|||
</TabStrip.ItemsPanel> |
|||
</TabStrip> |
|||
</ScrollViewer> |
|||
<Carousel Name="PART_Content" |
|||
Margin="8 0 0 0" |
|||
MemberSelector="{x:Static TabControl.ContentSelector}" |
|||
Items="{TemplateBinding Items}" |
|||
SelectedIndex="{TemplateBinding SelectedIndex}" |
|||
PageTransition="{TemplateBinding PageTransition}" |
|||
Grid.Row="1"/> |
|||
</DockPanel> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TabControl.sidebar"> |
|||
<Setter Property="TabStripPlacement" Value="Left"/> |
|||
<Setter Property="Padding" Value="8 0 0 0"/> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border |
|||
Margin="{TemplateBinding Margin}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}"> |
|||
<DockPanel> |
|||
<ScrollViewer |
|||
Name="PART_ScrollViewer" |
|||
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}" |
|||
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}" |
|||
Background="{TemplateBinding Background}"> |
|||
<ItemsPresenter |
|||
Name="PART_ItemsPresenter" |
|||
MinWidth="190" |
|||
Items="{TemplateBinding Items}" |
|||
ItemsPanel="{TemplateBinding ItemsPanel}" |
|||
ItemTemplate="{TemplateBinding ItemTemplate}" |
|||
MemberSelector="{TemplateBinding MemberSelector}"> |
|||
</ItemsPresenter> |
|||
</ScrollViewer> |
|||
<ContentPresenter |
|||
Name="PART_Content" |
|||
Margin="{TemplateBinding Padding}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding SelectedContent}" |
|||
ContentTemplate="{TemplateBinding SelectedContentTemplate}"> |
|||
</ContentPresenter> |
|||
</DockPanel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="TabControl.sidebar TabStripItem"> |
|||
<Setter Property="Foreground" Value="White"/> |
|||
<Setter Property="FontSize" Value="14"/> |
|||
<Setter Property="Margin" Value="0"/> |
|||
<Setter Property="Padding" Value="16"/> |
|||
<Setter Property="Opacity" Value="0.5"/> |
|||
<Setter Property="Transitions"> |
|||
<Transitions> |
|||
<DoubleTransition Property="Opacity" Duration="0:0:0.2"/> |
|||
</Transitions> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="TabControl.sidebar TabStripItem:pointerover"> |
|||
<Setter Property="Opacity" Value="1"/> |
|||
</Style> |
|||
|
|||
<Style Selector="TabControl.sidebar TabStripItem:selected"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/> |
|||
<Setter Property="Opacity" Value="1"/> |
|||
</Style> |
|||
<Style Selector="TabControl.sidebar > TabItem"> |
|||
<Setter Property="BorderThickness" Value="0"/> |
|||
<Setter Property="Foreground" Value="White"/> |
|||
<Setter Property="FontSize" Value="14"/> |
|||
<Setter Property="Margin" Value="0"/> |
|||
<Setter Property="Padding" Value="16"/> |
|||
<Setter Property="Opacity" Value="0.5"/> |
|||
<Setter Property="Transitions"> |
|||
<Transitions> |
|||
<DoubleTransition Property="Opacity" Duration="0:0:0.5"/> |
|||
</Transitions> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TabControl.sidebar > TabItem:pointerover"> |
|||
<Setter Property="Opacity" Value="1"/> |
|||
</Style> |
|||
<Style Selector="TabControl.sidebar > TabItem:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="Transparent"/> |
|||
</Style> |
|||
<Style Selector="TabControl.sidebar > TabItem:selected"> |
|||
<Setter Property="Opacity" Value="1"/> |
|||
</Style> |
|||
<Style Selector="TabControl.sidebar > TabItem:selected /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/> |
|||
</Style> |
|||
</Styles> |
|||
|
|||
@ -0,0 +1,57 @@ |
|||
// Copyright (c) The Avalonia Project. All rights reserved.
|
|||
// Licensed under the MIT license. See licence.md file in the project root for full license information.
|
|||
|
|||
using Avalonia.Controls.Primitives; |
|||
|
|||
namespace Avalonia.Controls.Generators |
|||
{ |
|||
public class TabItemContainerGenerator : ItemContainerGenerator<TabItem> |
|||
{ |
|||
public TabItemContainerGenerator(TabControl owner) |
|||
: base(owner, ContentControl.ContentProperty, ContentControl.ContentTemplateProperty) |
|||
{ |
|||
Owner = owner; |
|||
} |
|||
|
|||
public new TabControl Owner { get; } |
|||
|
|||
protected override IControl CreateContainer(object item) |
|||
{ |
|||
var tabItem = (TabItem)base.CreateContainer(item); |
|||
|
|||
tabItem.ParentTabControl = Owner; |
|||
|
|||
if (tabItem.HeaderTemplate == null) |
|||
{ |
|||
tabItem[~HeaderedContentControl.HeaderTemplateProperty] = Owner[~ItemsControl.ItemTemplateProperty]; |
|||
} |
|||
|
|||
if (tabItem.Header == null) |
|||
{ |
|||
if (item is IHeadered headered) |
|||
{ |
|||
tabItem.Header = headered.Header; |
|||
} |
|||
else |
|||
{ |
|||
if (!(tabItem.DataContext is IControl)) |
|||
{ |
|||
tabItem.Header = tabItem.DataContext; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (!(tabItem.Content is IControl)) |
|||
{ |
|||
tabItem[~ContentControl.ContentTemplateProperty] = Owner[~TabControl.ContentTemplateProperty]; |
|||
} |
|||
|
|||
if (tabItem.Content == null) |
|||
{ |
|||
tabItem[~ContentControl.ContentProperty] = tabItem[~StyledElement.DataContextProperty]; |
|||
} |
|||
|
|||
return tabItem; |
|||
} |
|||
} |
|||
} |
|||
@ -1,50 +1,56 @@ |
|||
<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> |
|||
<Style Selector="TabControl"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}"> |
|||
<DockPanel> |
|||
<TabStrip Name="PART_TabStrip" |
|||
MemberSelector="{x:Static TabControl.HeaderSelector}" |
|||
Items="{TemplateBinding Items}" |
|||
SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}"/> |
|||
<Carousel Name="PART_Content" |
|||
MemberSelector="{x:Static TabControl.ContentSelector}" |
|||
Items="{TemplateBinding Items}" |
|||
SelectedIndex="{TemplateBinding SelectedIndex}" |
|||
PageTransition="{TemplateBinding PageTransition}" |
|||
Grid.Row="1"/> |
|||
</DockPanel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Top] /template/ TabStrip"> |
|||
<Setter Property="DockPanel.Dock" Value="Top"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Bottom] /template/ TabStrip"> |
|||
<Setter Property="DockPanel.Dock" Value="Bottom"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Left] /template/ TabStrip"> |
|||
<Setter Property="DockPanel.Dock" Value="Left"/> |
|||
<Setter Property="ItemsPanel"> |
|||
<Setter.Value> |
|||
<ItemsPanelTemplate> |
|||
<StackPanel Orientation="Vertical"/> |
|||
</ItemsPanelTemplate> |
|||
</Setter.Value> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Right] /template/ TabStrip"> |
|||
<Setter Property="DockPanel.Dock" Value="Right"/> |
|||
<Setter Property="ItemsPanel"> |
|||
<Setter.Value> |
|||
<ItemsPanelTemplate> |
|||
<StackPanel Orientation="Vertical"/> |
|||
</ItemsPanelTemplate> |
|||
</Setter.Value> |
|||
</Setter> |
|||
</Style> |
|||
</Styles> |
|||
<Style Selector="TabControl"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/> |
|||
<Setter Property="Padding" Value="4"/> |
|||
<Setter Property="VerticalContentAlignment" Value="Stretch"/> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border |
|||
Margin="{TemplateBinding Margin}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Background="{TemplateBinding Background}" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
VerticalAlignment="{TemplateBinding VerticalAlignment}"> |
|||
<DockPanel> |
|||
<ItemsPresenter |
|||
Name="PART_ItemsPresenter" |
|||
Items="{TemplateBinding Items}" |
|||
ItemsPanel="{TemplateBinding ItemsPanel}" |
|||
ItemTemplate="{TemplateBinding ItemTemplate}" |
|||
MemberSelector="{TemplateBinding MemberSelector}" > |
|||
</ItemsPresenter> |
|||
<ContentPresenter |
|||
Name="PART_Content" |
|||
Margin="{TemplateBinding Padding}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding SelectedContent}" |
|||
ContentTemplate="{TemplateBinding SelectedContentTemplate}"> |
|||
</ContentPresenter> |
|||
</DockPanel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter"> |
|||
<Setter Property="DockPanel.Dock" Value="Top"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Bottom] /template/ ItemsPresenter#PART_ItemsPresenter"> |
|||
<Setter Property="DockPanel.Dock" Value="Bottom"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter"> |
|||
<Setter Property="DockPanel.Dock" Value="Left"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel"> |
|||
<Setter Property="Orientation" Value="Vertical"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter"> |
|||
<Setter Property="DockPanel.Dock" Value="Right"/> |
|||
</Style> |
|||
<Style Selector="TabControl[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel"> |
|||
<Setter Property="Orientation" Value="Vertical"/> |
|||
</Style> |
|||
</Styles> |
|||
|
|||
@ -0,0 +1,39 @@ |
|||
<Styles xmlns="https://github.com/avaloniaui"> |
|||
<Style Selector="TabItem"> |
|||
<Setter Property="Background" Value="Transparent"/> |
|||
<Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLightBrush}"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<ContentPresenter |
|||
Name="PART_ContentPresenter" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
ContentTemplate="{TemplateBinding HeaderTemplate}" |
|||
Content="{TemplateBinding Header}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Padding="{TemplateBinding Padding}"/> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TabItem:disabled"> |
|||
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/> |
|||
</Style> |
|||
<Style Selector="TabItem:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
|||
</Style> |
|||
<Style Selector="TabItem:selected /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/> |
|||
</Style> |
|||
<Style Selector="TabItem:selected:focus /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/> |
|||
</Style> |
|||
<Style Selector="TabItem:selected:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/> |
|||
</Style> |
|||
<Style Selector="TabItem:selected:focus:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/> |
|||
</Style> |
|||
</Styles> |
|||
Loading…
Reference in new issue