feat: polish list theme.
This commit is contained in:
Dong Bin
@@ -1,114 +1,137 @@
|
||||
<UserControl xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:u="https://irihi.tech/ursa"
|
||||
xmlns:vm="using:Ursa.Demo.ViewModels"
|
||||
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
|
||||
x:Class="Ursa.Demo.Pages.PathPickerDemo"
|
||||
x:DataType="vm:PathPickerDemoViewModel">
|
||||
<Grid ColumnDefinitions="*,*"
|
||||
RowDefinitions="7*,3*">
|
||||
<ScrollViewer Grid.Column="0" Grid.Row="0">
|
||||
<UserControl
|
||||
x:Class="Ursa.Demo.Pages.PathPickerDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:u="https://irihi.tech/ursa"
|
||||
xmlns:vm="using:Ursa.Demo.ViewModels"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
x:DataType="vm:PathPickerDemoViewModel"
|
||||
mc:Ignorable="d">
|
||||
<Grid ColumnDefinitions="*,*" RowDefinitions="7*,3*">
|
||||
<ScrollViewer Grid.Row="0" Grid.Column="0">
|
||||
<StackPanel>
|
||||
<HeaderedContentControl Theme="{DynamicResource GroupBox}"
|
||||
Header="Functionality and Usage"
|
||||
Content="PathPicker aggregates a file selector and provides a Command property. The Command is triggered solely after opening the file selector and selecting a file, whereupon the Command receives an IReadOnlyList<string> parameter.">
|
||||
</HeaderedContentControl>
|
||||
<u:Form LabelAlignment="Left" LabelPosition="Left" LabelWidth="*" HorizontalAlignment="Stretch">
|
||||
<TextBox Name="Title" u:FormItem.Label="Title" Text="选择文件"></TextBox>
|
||||
<TextBox Name="SuggestedFileName" u:FormItem.Label="SuggestedFileName"
|
||||
Watermark="filename(not have file extension)">
|
||||
</TextBox>
|
||||
<TextBox Name="SuggestedStartPath" u:FormItem.Label="SuggestedStartPath"
|
||||
Watermark="D:\Win7 Help\win-x64">
|
||||
</TextBox>
|
||||
<TextBox Name="FileFilter" u:FormItem.Label="FileFilter"
|
||||
Watermark="[Name,Pattern] like this [123,*.exe,*.pdb] or [All][ImageAll][11,*.txt]">
|
||||
</TextBox>
|
||||
<TextBox Name="DefaultFileExtension" u:FormItem.Label="DefaultFileExtension"
|
||||
Watermark="json">
|
||||
</TextBox>
|
||||
<CheckBox Name="AllowMultiple" Content="AllowMultiple" u:FormItem.NoLabel="True"
|
||||
>
|
||||
</CheckBox>
|
||||
<CheckBox Name="IsOmitCommandOnCancel" Content="Do not trigger the command after unselecting."
|
||||
u:FormItem.NoLabel="True"
|
||||
>
|
||||
</CheckBox>
|
||||
<CheckBox Name="IsClearSelectionOnCancel" Content="Clear the selection when unselecting."
|
||||
u:FormItem.NoLabel="True"
|
||||
>
|
||||
</CheckBox>
|
||||
<u:EnumSelector Name="UsePickerType" EnumType="u:UsePickerTypes" u:FormItem.Label="UsePickerType"></u:EnumSelector>
|
||||
<u:ControlClassesInput Name="ClassInput" u:FormItem.Label="Style Class" HorizontalAlignment="Left"></u:ControlClassesInput>
|
||||
<HeaderedContentControl
|
||||
Content="PathPicker aggregates a file selector and provides a Command property. The Command is triggered solely after opening the file selector and selecting a file, whereupon the Command receives an IReadOnlyList<string> parameter."
|
||||
Header="Functionality and Usage"
|
||||
Theme="{DynamicResource GroupBox}" />
|
||||
<u:Form
|
||||
HorizontalAlignment="Stretch"
|
||||
LabelAlignment="Left"
|
||||
LabelPosition="Left"
|
||||
LabelWidth="*">
|
||||
<TextBox
|
||||
Name="Title"
|
||||
u:FormItem.Label="Title"
|
||||
Text="选择文件" />
|
||||
<TextBox
|
||||
Name="SuggestedFileName"
|
||||
u:FormItem.Label="SuggestedFileName"
|
||||
Watermark="filename(not have file extension)" />
|
||||
<TextBox
|
||||
Name="SuggestedStartPath"
|
||||
u:FormItem.Label="SuggestedStartPath"
|
||||
Watermark="D:\Win7 Help\win-x64" />
|
||||
<TextBox
|
||||
Name="FileFilter"
|
||||
u:FormItem.Label="FileFilter"
|
||||
Watermark="[Name,Pattern] like this [123,*.exe,*.pdb] or [All][ImageAll][11,*.txt]" />
|
||||
<TextBox
|
||||
Name="DefaultFileExtension"
|
||||
u:FormItem.Label="DefaultFileExtension"
|
||||
Watermark="json" />
|
||||
<CheckBox
|
||||
Name="AllowMultiple"
|
||||
u:FormItem.NoLabel="True"
|
||||
Content="AllowMultiple" />
|
||||
<CheckBox
|
||||
Name="IsOmitCommandOnCancel"
|
||||
u:FormItem.NoLabel="True"
|
||||
Content="Do not trigger the command after unselecting." />
|
||||
<CheckBox
|
||||
Name="IsClearSelectionOnCancel"
|
||||
u:FormItem.NoLabel="True"
|
||||
Content="Clear the selection when unselecting." />
|
||||
<u:EnumSelector
|
||||
Name="UsePickerType"
|
||||
u:FormItem.Label="UsePickerType"
|
||||
EnumType="u:UsePickerTypes" />
|
||||
<u:ControlClassesInput
|
||||
Name="ClassInput"
|
||||
HorizontalAlignment="Left"
|
||||
u:FormItem.Label="Style Class" />
|
||||
</u:Form>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
<ScrollViewer Grid.Column="0" Grid.Row="1">
|
||||
<ScrollViewer Grid.Row="1" Grid.Column="0">
|
||||
<StackPanel Spacing="2">
|
||||
<HeaderedContentControl Header="Default">
|
||||
<u:PathPicker Title="{Binding #Title.Text}"
|
||||
u:ControlClassesInput.Source="{Binding #ClassInput}"
|
||||
SuggestedFileName="{Binding #SuggestedFileName.Text}"
|
||||
SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
|
||||
FileFilter="{Binding #FileFilter.Text}"
|
||||
DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
|
||||
AllowMultiple="{Binding #AllowMultiple.IsChecked, Mode=TwoWay}"
|
||||
UsePickerType="{Binding #UsePickerType.Value}"
|
||||
SelectedPathsText="{Binding Path,Mode=OneWayToSource}"
|
||||
SelectedPaths="{Binding Paths,Mode=OneWayToSource}"
|
||||
Command="{Binding SelectedCommand}"
|
||||
IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
|
||||
IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}">
|
||||
</u:PathPicker>
|
||||
<u:PathPicker
|
||||
Title="{Binding #Title.Text}"
|
||||
u:ControlClassesInput.Source="{Binding #ClassInput}"
|
||||
AllowMultiple="{Binding #AllowMultiple.IsChecked, Mode=TwoWay}"
|
||||
Command="{Binding SelectedCommand}"
|
||||
DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
|
||||
FileFilter="{Binding #FileFilter.Text}"
|
||||
IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}"
|
||||
IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
|
||||
SelectedPaths="{Binding Paths, Mode=OneWayToSource}"
|
||||
SelectedPathsText="{Binding Path, Mode=OneWayToSource}"
|
||||
SuggestedFileName="{Binding #SuggestedFileName.Text}"
|
||||
SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
|
||||
UsePickerType="{Binding #UsePickerType.Value}" />
|
||||
</HeaderedContentControl>
|
||||
<HeaderedContentControl Header="ButtonPathPicker">
|
||||
<u:PathPicker Theme="{DynamicResource ButtonPathPicker}"
|
||||
Title="{Binding #Title.Text}"
|
||||
SuggestedFileName="{Binding #SuggestedFileName.Text}"
|
||||
SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
|
||||
FileFilter="{Binding #FileFilter.Text}"
|
||||
DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
|
||||
AllowMultiple="{Binding #AllowMultiple.IsChecked}"
|
||||
UsePickerType="{Binding #UsePickerType.Value}"
|
||||
SelectedPathsText="{Binding Path,Mode=OneWayToSource}"
|
||||
SelectedPaths="{Binding Paths,Mode=OneWayToSource}"
|
||||
Command="{Binding SelectedCommand}"
|
||||
IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
|
||||
IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}">
|
||||
</u:PathPicker>
|
||||
<u:PathPicker
|
||||
Title="{Binding #Title.Text}"
|
||||
AllowMultiple="{Binding #AllowMultiple.IsChecked}"
|
||||
Command="{Binding SelectedCommand}"
|
||||
DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
|
||||
FileFilter="{Binding #FileFilter.Text}"
|
||||
IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}"
|
||||
IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
|
||||
SelectedPaths="{Binding Paths, Mode=OneWayToSource}"
|
||||
SelectedPathsText="{Binding Path, Mode=OneWayToSource}"
|
||||
SuggestedFileName="{Binding #SuggestedFileName.Text}"
|
||||
SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
|
||||
Theme="{DynamicResource ButtonPathPicker}"
|
||||
UsePickerType="{Binding #UsePickerType.Value}" />
|
||||
</HeaderedContentControl>
|
||||
<HeaderedContentControl Header="PathPickerForListView">
|
||||
<u:PathPicker Theme="{DynamicResource PathPickerForListView}"
|
||||
Title="{Binding #Title.Text}"
|
||||
SuggestedFileName="{Binding #SuggestedFileName.Text}"
|
||||
SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
|
||||
FileFilter="{Binding #FileFilter.Text}"
|
||||
DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
|
||||
AllowMultiple="{Binding #AllowMultiple.IsChecked}"
|
||||
UsePickerType="{Binding #UsePickerType.Value}"
|
||||
SelectedPathsText="{Binding Path,Mode=OneWayToSource}"
|
||||
SelectedPaths="{Binding Paths,Mode=OneWayToSource}"
|
||||
Command="{Binding SelectedCommand}"
|
||||
IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
|
||||
IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}">
|
||||
</u:PathPicker>
|
||||
<HeaderedContentControl Header="ListPathPicker">
|
||||
<u:PathPicker
|
||||
Title="{Binding #Title.Text}"
|
||||
AllowMultiple="{Binding #AllowMultiple.IsChecked}"
|
||||
Command="{Binding SelectedCommand}"
|
||||
DefaultFileExtension="{Binding #DefaultFileExtension.Text}"
|
||||
FileFilter="{Binding #FileFilter.Text}"
|
||||
IsClearSelectionOnCancel="{Binding #IsClearSelectionOnCancel.IsChecked}"
|
||||
IsOmitCommandOnCancel="{Binding #IsOmitCommandOnCancel.IsChecked}"
|
||||
SelectedPaths="{Binding Paths, Mode=OneWayToSource}"
|
||||
SelectedPathsText="{Binding Path, Mode=OneWayToSource}"
|
||||
SuggestedFileName="{Binding #SuggestedFileName.Text}"
|
||||
SuggestedStartPath="{Binding #SuggestedStartPath.Text}"
|
||||
Theme="{DynamicResource ListPathPicker}"
|
||||
UsePickerType="{Binding #UsePickerType.Value}" />
|
||||
</HeaderedContentControl>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
<ScrollViewer Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
|
||||
<ScrollViewer
|
||||
Grid.Row="0"
|
||||
Grid.RowSpan="2"
|
||||
Grid.Column="1">
|
||||
<StackPanel Spacing="1">
|
||||
<TextBlock Text="{Binding CommandTriggerCount,StringFormat='Command Trigger Count:{0}'}"></TextBlock>
|
||||
<TextBlock Text="{Binding CommandTriggerCount, StringFormat='Command Trigger Count:{0}'}" />
|
||||
<HeaderedContentControl Header="SelectedPathsText">
|
||||
<TextBox Name="SelectedPath" u:FormItem.Label="SelectedPath" IsReadOnly="True"
|
||||
Text="{Binding Path}">
|
||||
</TextBox>
|
||||
<TextBox
|
||||
Name="SelectedPath"
|
||||
u:FormItem.Label="SelectedPath"
|
||||
IsReadOnly="True"
|
||||
Text="{Binding Path}" />
|
||||
</HeaderedContentControl>
|
||||
<HeaderedContentControl Header="SelectedPaths">
|
||||
<ListBox Name="SelectedPaths"
|
||||
ItemsSource="{Binding Paths}">
|
||||
</ListBox>
|
||||
<ListBox Name="SelectedPaths" ItemsSource="{Binding Paths}" />
|
||||
</HeaderedContentControl>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
|
||||
@@ -15,15 +15,16 @@
|
||||
<DockPanel>
|
||||
<Button
|
||||
Name="{x:Static u:PathPicker.PART_Button}"
|
||||
Content="{TemplateBinding Title}"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Center"
|
||||
Content="{TemplateBinding Title}"
|
||||
DockPanel.Dock="Right" />
|
||||
<TextBox
|
||||
Name="PART_TextBox"
|
||||
AcceptsReturn="{TemplateBinding AllowMultiple}"
|
||||
DockPanel.Dock="Left"
|
||||
Text="{TemplateBinding SelectedPathsText, Mode=TwoWay}" />
|
||||
Text="{TemplateBinding SelectedPathsText,
|
||||
Mode=TwoWay}" />
|
||||
</DockPanel>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
@@ -34,9 +35,9 @@
|
||||
|
||||
<Style Selector="^ /template/ Button#PART_Button">
|
||||
<Setter Property="DockPanel.Dock" Value="Right" />
|
||||
<Setter Property="VerticalAlignment" Value="Center"></Setter>
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={x:Static converters:CornerRadiusTakeConverter.Right}}" />
|
||||
<Setter Property="Margin" Value="1 0 0 0"></Setter>
|
||||
<Setter Property="Margin" Value="1 0 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ TextBox#PART_TextBox">
|
||||
<Setter Property="DockPanel.Dock" Value="Left" />
|
||||
@@ -46,7 +47,7 @@
|
||||
<Style Selector="^ /template/ Button#PART_Button">
|
||||
<Setter Property="DockPanel.Dock" Value="Top" />
|
||||
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={x:Static converters:CornerRadiusTakeConverter.Top}}" />
|
||||
<Setter Property="Margin" Value="0 0 0 1"></Setter>
|
||||
<Setter Property="Margin" Value="0 0 0 1" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ TextBox#PART_TextBox">
|
||||
<Setter Property="DockPanel.Dock" Value="Bottom" />
|
||||
@@ -71,33 +72,90 @@
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="PathPickerForListView" TargetType="u:PathPicker">
|
||||
<ControlTheme x:Key="ListPathPicker" TargetType="u:PathPicker">
|
||||
<Setter Property="CornerRadius" Value="3" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
<Expander HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
|
||||
<Expander
|
||||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
|
||||
VerticalAlignment="{TemplateBinding VerticalAlignment}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
Theme="{StaticResource INTERNAL_PathPickerExpander}">
|
||||
<Expander.Header>
|
||||
<Button
|
||||
Name="PART_Button"
|
||||
HorizontalAlignment="Stretch"
|
||||
Content="{TemplateBinding Title}">
|
||||
<Button.Theme>
|
||||
<ControlTheme TargetType="Button">
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
<TextPresenter
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Background="Transparent"
|
||||
Text="{TemplateBinding Content}" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
</Button.Theme>
|
||||
</Button>
|
||||
Content="{TemplateBinding Title}"
|
||||
CornerRadius="{TemplateBinding CornerRadius,
|
||||
Converter={x:Static converters:CornerRadiusTakeConverter.Left}}" />
|
||||
</Expander.Header>
|
||||
<ListBox ItemsSource="{TemplateBinding SelectedPaths}" />
|
||||
</Expander>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^ /template/ Button#PART_Button:pressed">
|
||||
<Setter Property="RenderTransform" Value="{x:Null}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="INTERNAL_PathPickerExpander" TargetType="Expander">
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
<DockPanel>
|
||||
<DockPanel DockPanel.Dock="Top" LastChildFill="True">
|
||||
<ToggleButton
|
||||
Name="ExpanderHeader"
|
||||
Margin="1,0,0,0"
|
||||
Background="{DynamicResource ToggleButtonDefaultBackground}"
|
||||
CornerRadius="{TemplateBinding CornerRadius,
|
||||
Converter={x:Static converters:CornerRadiusTakeConverter.Right}}"
|
||||
DockPanel.Dock="Right"
|
||||
IsChecked="{TemplateBinding IsExpanded,
|
||||
Mode=TwoWay}"
|
||||
Theme="{DynamicResource INTERNAL_PathPickerExpanderHeaderToggleButtonTheme}">
|
||||
<PathIcon
|
||||
Name="PART_PathIcon"
|
||||
Data="{DynamicResource ExpanderIcon}"
|
||||
Theme="{DynamicResource InnerPathIcon}">
|
||||
<PathIcon.Transitions>
|
||||
<Transitions>
|
||||
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
|
||||
</Transitions>
|
||||
</PathIcon.Transitions>
|
||||
</PathIcon>
|
||||
</ToggleButton>
|
||||
<ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
|
||||
</DockPanel>
|
||||
<ContentPresenter
|
||||
Name="PART_ContentPresenter"
|
||||
Margin="{DynamicResource ExpanderContentMargin}"
|
||||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||
Foreground="{DynamicResource ExpanderContentForeground}"
|
||||
IsVisible="{TemplateBinding IsExpanded,
|
||||
Mode=TwoWay}" />
|
||||
</DockPanel>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<Style Selector="^:expanded /template/ PathIcon#PART_PathIcon">
|
||||
<Setter Property="RenderTransform" Value="rotate(180deg)" />
|
||||
</Style>
|
||||
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="INTERNAL_PathPickerExpanderHeaderToggleButtonTheme" TargetType="ToggleButton">
|
||||
<Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="ToggleButton">
|
||||
<ContentPresenter
|
||||
Padding="{TemplateBinding Padding}"
|
||||
Background="{TemplateBinding Background}"
|
||||
Content="{TemplateBinding Content}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
Reference in New Issue
Block a user