feat: improve demo.
This commit is contained in:
rabbitism
@@ -12,27 +12,125 @@
|
||||
x:CompileBindings="True"
|
||||
x:DataType="vm:ToolBarDemoViewModel"
|
||||
mc:Ignorable="d">
|
||||
<DockPanel>
|
||||
<UserControl.Resources>
|
||||
<ResourceDictionary>
|
||||
<StreamGeometry x:Key="BoldGlyph">M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z</StreamGeometry>
|
||||
<StreamGeometry x:Key="ItalicGlyph">M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z</StreamGeometry>
|
||||
</ResourceDictionary>
|
||||
</UserControl.Resources>
|
||||
<Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, *">
|
||||
<u:EnumSelector Name="Orientation" EnumType="Orientation" />
|
||||
<u:ToolBar
|
||||
HorizontalAlignment="Left"
|
||||
DockPanel.Dock="Top"
|
||||
Header="Hello World">
|
||||
<Button Content="Button 1" u:ToolBar.OverflowMode="Never" />
|
||||
<u:ToolBarSeparator/>
|
||||
Header="Hello World"
|
||||
Orientation="{Binding #Orientation.Value}">
|
||||
<Button u:ToolBar.OverflowMode="Never" Content="Button 1" />
|
||||
<u:ToolBarSeparator />
|
||||
<Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 2" />
|
||||
<Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 3" />
|
||||
<ToggleButton Content="Toggle"></ToggleButton>
|
||||
<ToggleButton Content="Toggle" />
|
||||
<u:ToolBar.Styles>
|
||||
<Style Selector="u|ToolBar[Orientation=Vertical]">
|
||||
<Setter Property="Grid.Row" Value="1" />
|
||||
<Setter Property="Grid.Column" Value="1" />
|
||||
<Setter Property="Grid.RowSpan" Value="2" />
|
||||
<Setter Property="Grid.ColumnSpan" Value="1" />
|
||||
</Style>
|
||||
<Style Selector="u|ToolBar[Orientation=Horizontal]">
|
||||
<Setter Property="Grid.Row" Value="1" />
|
||||
<Setter Property="Grid.Column" Value="1" />
|
||||
<Setter Property="Grid.RowSpan" Value="1" />
|
||||
<Setter Property="Grid.ColumnSpan" Value="3" />
|
||||
</Style>
|
||||
</u:ToolBar.Styles>
|
||||
</u:ToolBar>
|
||||
<u:EnumSelector EnumType="Orientation" Name="Orientation" DockPanel.Dock="Top"></u:EnumSelector>
|
||||
<u:ToolBar
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
DockPanel.Dock="Top"
|
||||
Orientation="{Binding #Orientation.Value}"
|
||||
ItemsSource="{Binding Items}">
|
||||
ItemsSource="{Binding Items}"
|
||||
Orientation="{Binding #Orientation.Value}">
|
||||
<u:ToolBar.ItemTemplate>
|
||||
<template:ToolBarItemTemplateSelector />
|
||||
</u:ToolBar.ItemTemplate>
|
||||
<u:ToolBar.Styles>
|
||||
<Style Selector="u|ToolBar[Orientation=Vertical]">
|
||||
<Setter Property="Grid.Row" Value="1" />
|
||||
<Setter Property="Grid.Column" Value="0" />
|
||||
<Setter Property="Grid.RowSpan" Value="2" />
|
||||
<Setter Property="Grid.ColumnSpan" Value="1" />
|
||||
</Style>
|
||||
<Style Selector="u|ToolBar[Orientation=Horizontal]">
|
||||
<Setter Property="Grid.Row" Value="0" />
|
||||
<Setter Property="Grid.Column" Value="1" />
|
||||
<Setter Property="Grid.RowSpan" Value="1" />
|
||||
<Setter Property="Grid.ColumnSpan" Value="3" />
|
||||
</Style>
|
||||
</u:ToolBar.Styles>
|
||||
</u:ToolBar>
|
||||
</DockPanel>
|
||||
<Grid
|
||||
Grid.Row="2"
|
||||
Grid.Column="2"
|
||||
RowDefinitions="Auto, *">
|
||||
<u:ToolBar>
|
||||
<ToggleButton Name="bold">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource BoldGlyph}" />
|
||||
</ToggleButton>
|
||||
<ToggleButton Name="italic">
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{DynamicResource ItalicGlyph}" />
|
||||
</ToggleButton>
|
||||
<u:ToolBarSeparator />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock
|
||||
Margin="8,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Text="Font Size" />
|
||||
<ComboBox
|
||||
Name="size"
|
||||
Width="90"
|
||||
SelectedIndex="0">
|
||||
<x:Double>8</x:Double>
|
||||
<x:Double>16</x:Double>
|
||||
<x:Double>32</x:Double>
|
||||
</ComboBox>
|
||||
</StackPanel>
|
||||
<u:ToolBar.Styles>
|
||||
<Style Selector="u|ToolBar[Orientation=Horizontal]">
|
||||
<Setter Property="Grid.Row" Value="2" />
|
||||
<Setter Property="Grid.Column" Value="1" />
|
||||
<Setter Property="Grid.RowSpan" Value="1" />
|
||||
<Setter Property="Grid.ColumnSpan" Value="3" />
|
||||
</Style>
|
||||
</u:ToolBar.Styles>
|
||||
|
||||
</u:ToolBar>
|
||||
<TextBlock
|
||||
Grid.Row="1"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Classes.Bold="{Binding #bold.IsChecked}"
|
||||
Classes.Italic="{Binding #italic.IsChecked}"
|
||||
FontSize="{Binding #size.SelectedItem}"
|
||||
Text="Hello Ursa Avalonia">
|
||||
<TextBlock.Styles>
|
||||
<Style Selector="TextBlock">
|
||||
<Setter Property="FontWeight" Value="Regular" />
|
||||
<Setter Property="FontSize" Value="8" />
|
||||
<Setter Property="FontStyle" Value="Normal" />
|
||||
</Style>
|
||||
<Style Selector="TextBlock.Bold">
|
||||
<Setter Property="FontWeight" Value="Bold" />
|
||||
</Style>
|
||||
<Style Selector="TextBlock.Italic">
|
||||
<Setter Property="FontStyle" Value="Italic" />
|
||||
</Style>
|
||||
</TextBlock.Styles>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
|
||||
@@ -26,6 +26,8 @@
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
<ControlTheme x:Key="{x:Type u:ToolBar}" TargetType="u:ToolBar">
|
||||
<Setter Property="HorizontalAlignment" Value="Left"/>
|
||||
<Setter Property="VerticalAlignment" Value="Top"/>
|
||||
<Setter Property="ItemsPanel">
|
||||
<ItemsPanelTemplate>
|
||||
<u:ToolBarPanel />
|
||||
@@ -45,27 +47,30 @@
|
||||
Margin="8,0"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource SemiColorText2}"
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
DockPanel.Dock="Left"
|
||||
Foreground="{DynamicResource SemiColorText2}"
|
||||
IsVisible="{TemplateBinding Header,
|
||||
Converter={x:Static ObjectConverters.IsNotNull}}" />
|
||||
<Panel Name="PART_PopupButtonPanel" DockPanel.Dock="Right">
|
||||
<ToggleButton
|
||||
Name="button"
|
||||
IsVisible="False"
|
||||
Padding="8,0"
|
||||
VerticalAlignment="Stretch"
|
||||
IsVisible="False"
|
||||
Theme="{DynamicResource ToolBarExpandToggleButton}">
|
||||
<PathIcon Name="PART_Icon" Height="16" Data="{DynamicResource ToolBarHorizontalMoreGlyph}"></PathIcon>
|
||||
<PathIcon
|
||||
Name="PART_Icon"
|
||||
Height="16"
|
||||
Data="{DynamicResource ToolBarHorizontalMoreGlyph}" />
|
||||
</ToggleButton>
|
||||
<Popup
|
||||
IsLightDismissEnabled="True"
|
||||
IsOpen="{Binding #button.IsChecked, Mode=TwoWay}"
|
||||
Placement="{TemplateBinding PopupPlacement}"
|
||||
PlacementTarget="{Binding #button}">
|
||||
<Border Theme="{DynamicResource CardBorder}" Padding="2">
|
||||
<Border Padding="2" Theme="{DynamicResource CardBorder}">
|
||||
<StackPanel Name="{x:Static u:ToolBar.PART_OverflowPanel}" />
|
||||
</Border>
|
||||
</Popup>
|
||||
@@ -84,41 +89,47 @@
|
||||
<Style Selector="^[Orientation=Vertical]">
|
||||
<Setter Property="PopupPlacement" Value="RightEdgeAlignedTop" />
|
||||
<Style Selector="^ /template/ ContentPresenter#PART_Header">
|
||||
<Setter Property="DockPanel.Dock" Value="Top"></Setter>
|
||||
<Setter Property="DockPanel.Dock" Value="Top" />
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
<Setter Property="VerticalAlignment" Value="Top" />
|
||||
<Setter Property="Margin" Value="0 8" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ Panel#PART_PopupButtonPanel">
|
||||
<Setter Property="DockPanel.Dock" Value="Bottom"></Setter>
|
||||
<Setter Property="DockPanel.Dock" Value="Bottom" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ ToggleButton#button">
|
||||
<Setter Property="Padding" Value="0 8"></Setter>
|
||||
<Setter Property="Padding" Value="0 8" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="Data" Value="{DynamicResource ToolBarVerticalMoreGlyph}"></Setter>
|
||||
<Setter Property="Width" Value="16"></Setter>
|
||||
<Setter Property="Height" Value="{x:Static x:Double.NaN}"></Setter>
|
||||
<Setter Property="Data" Value="{DynamicResource ToolBarVerticalMoreGlyph}" />
|
||||
<Setter Property="Width" Value="16" />
|
||||
<Setter Property="Height" Value="{x:Static x:Double.NaN}" />
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="^:overflow /template/ ToggleButton#button">
|
||||
<Setter Property="IsVisible" Value="True"></Setter>
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
|
||||
<ControlTheme x:Key="{x:Type u:ToolBarSeparator}" TargetType="u:ToolBarSeparator">
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
<Rectangle Name="PART_Rect" Margin="4 " Fill="{DynamicResource SemiColorBorder}"></Rectangle>
|
||||
<Rectangle
|
||||
Name="PART_Rect"
|
||||
Margin="4"
|
||||
Fill="{DynamicResource SemiColorBorder}" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^ /template/ Rectangle#PART_Rect">
|
||||
<Setter Property="Width" Value="1"/>
|
||||
<Setter Property="VerticalAlignment" Value="Stretch"/>
|
||||
<Setter Property="Width" Value="1" />
|
||||
<Setter Property="VerticalAlignment" Value="Stretch" />
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
</Style>
|
||||
<Style Selector="^:vertical /template/ Rectangle#PART_Rect">
|
||||
<Setter Property="Height" Value="1"></Setter>
|
||||
<Setter Property="Height" Value="1" />
|
||||
<Setter Property="Width" Value="{x:Static x:Double.NaN}" />
|
||||
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
||||
<Setter Property="VerticalAlignment" Value="Center"></Setter>
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
|
||||
Reference in New Issue
Block a user