使用Material Design(二)
程序员文章站
2022-05-30 23:12:32
...
控件应用Material Design样式
官方提供了Demo,可以在Demo中复制样式
DemoApp地址:https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases
<materialDesign:Card Padding="32" Margin="16">
<WrapPanel>
<TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}">My First Material Design App</TextBlock>
<Button Content="Click"/>
<Button Style="{DynamicResource MaterialDesignRaisedLightButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignRaisedDarkButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignRaisedAccentButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFlatButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFlatAccentButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFlatAccentBgButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFlatLightBgButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFlatMidBgButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFlatDarkBgButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignOutlinedButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignToolButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignToolForegroundButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniLightButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniDarkButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniAccentButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionDarkButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignFloatingActionAccentButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignIconButton}" Content="Click"/>
<Button Style="{DynamicResource MaterialDesignIconForegroundButton}" Content="Click"/>
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"
ToolTip="MaterialDesignFloatingActionMiniLightButton">
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
</Button>
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
materialDesign:ButtonProgressAssist.Value="-1"
materialDesign:ButtonProgressAssist.IsIndeterminate="True"
Content="{materialDesign:PackIcon DotsHorizontal}" />
<DatePicker
Width="100"
materialDesign:HintAssist.Hint="Pick Date"
Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
<ToggleButton
Style="{StaticResource MaterialDesignSwitchToggleButton}"
ToolTip="Default ToggleButton Style" />
<ToggleButton
Style="{StaticResource MaterialDesignFlatToggleButton}"
ToolTip="MaterialDesignFlatToggleButton">
<materialDesign:PackIcon
Kind="Paperclip"
Height="21"
Width="21" />
</ToggleButton>
<materialDesign:RatingBar
Value="3"
x:Name="BasicRatingBar"
/>
<Slider
TickFrequency="5"
Orientation="Horizontal"
TickPlacement="BottomRight"
Minimum="1"
Maximum="50"
Value="25"
IsSelectionRangeEnabled="True" />
<materialDesign:PackIcon Kind="AddCircleOutline" />
<ListBox
IsEnabled="{Binding IsChecked, ElementName=EnableListBox}">
<TextBlock>
Plain
</TextBlock>
<TextBlock>
Old
</TextBlock>
<TextBlock>
ListBox
</TextBlock>
<TextBlock>
Full of junk
</TextBlock>
</ListBox>
<DataGrid
Margin="0 8 0 0"
ItemsSource="{Binding Items3}"
CanUserSortColumns="True"
CanUserAddRows="False"
AutoGenerateColumns="False"
materialDesign:DataGridAssist.CellPadding="13 8 8 8"
materialDesign:DataGridAssist.ColumnHeaderPadding="8">
<DataGrid.Columns>
<DataGridCheckBoxColumn
Binding="{Binding IsSelected}"
ElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnStyle}"
EditingElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnEditingStyle}">
<DataGridCheckBoxColumn.Header>
<!--padding to allow hit test to pass thru for sorting -->
<Border
Background="Transparent"
Padding="6 0 6 0"
HorizontalAlignment="Center">
<CheckBox
HorizontalAlignment="Center"
DataContext="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=DataContext}"
IsChecked="{Binding IsAllItems3Selected}" />
</Border>
</DataGridCheckBoxColumn.Header>
</DataGridCheckBoxColumn>
<DataGridTextColumn
Binding="{Binding Code}"
Header="Code"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />
<!-- if you want to use the pop up style (MaterialDesignDataGridTextColumnPopupEditingStyle), you must use MaterialDataGridTextColumn -->
<materialDesign:DataGridTextColumn
Binding="{Binding Name}"
Header="Name"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />
<!-- set a max length to get an indicator in the editor -->
<materialDesign:DataGridTextColumn
Binding="{Binding Description}"
Header="Description"
MaxLength="255"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />
<materialDesign:DataGridTextColumn
Binding="{Binding Numeric}"
Header="Number with long header"
Width="120"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}">
<DataGridTextColumn.HeaderStyle>
<Style
TargetType="{x:Type DataGridColumnHeader}"
BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
<Setter
Property="HorizontalAlignment"
Value="Right" />
<Setter
Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
TextWrapping="Wrap"
Text="{Binding}"
TextAlignment="Right" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style
TargetType="{x:Type TextBlock}">
<Setter
Property="HorizontalAlignment"
Value="Right" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<!-- use custom combo box column to get better combos. Use ItemsSourceBinding as your binding template to be applied to each combo -->
<materialDesign:DataGridComboBoxColumn
Header="Food"
IsEditable="True"
SelectedValueBinding="{Binding Food}"
ItemsSourceBinding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.Foods}">
<!--Setting the editing element style allows access to all of the combo box's properties
<materialDesign:MaterialDataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="ComboBox" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type ComboBox}, ResourceId=MaterialDataGridComboBoxColumnEditingStyle}}" >
<Setter Property="IsEditable" Value="True" />
</Style>
</materialDesign:MaterialDataGridComboBoxColumn.EditingElementStyle>
-->
</materialDesign:DataGridComboBoxColumn>
</DataGrid.Columns>
</DataGrid>
</WrapPanel>
</materialDesign:Card>
上一篇: 设计模式:State模式
下一篇: UGUI中UI控件简介