Skip to content

Commit 9c67e86

Browse files
mgnslndhKeboo
mgnslndh
authored and
Keboo
committed
Icon button (#1247)
* Add style for MaterialDesignIconButton * Add demonstration of MaterialDesignIconButton * Remove trailing spaces from MaterialDesignTheme.Button.xaml
1 parent ee679be commit 9c67e86

File tree

2 files changed

+87
-20
lines changed

2 files changed

+87
-20
lines changed

‎MainDemo.Wpf/Buttons.xaml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,26 @@
247247
</Button>
248248
</Grid>
249249
</smtx:XamlDisplay>
250+
<smtx:XamlDisplay Key="buttons_251" Margin="200 0 0 0">
251+
<Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="MaterialDesignIconButton">
252+
<materialDesign:PackIcon Kind="Play"/>
253+
</Button>
254+
</smtx:XamlDisplay>
255+
<smtx:XamlDisplay Key="buttons_252">
256+
<Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="MaterialDesignIconButton" IsEnabled="False">
257+
<materialDesign:PackIcon Kind="Play"/>
258+
</Button>
259+
</smtx:XamlDisplay>
260+
<smtx:XamlDisplay Key="buttons_253">
261+
<Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="MaterialDesignIconForegroundButton">
262+
<materialDesign:PackIcon Kind="Play"/>
263+
</Button>
264+
</smtx:XamlDisplay>
265+
<smtx:XamlDisplay Key="buttons_254">
266+
<Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="MaterialDesignIconButton" Background="{DynamicResource MaterialDesignTextFieldBoxBackground}">
267+
<materialDesign:PackIcon Kind="Play"/>
268+
</Button>
269+
</smtx:XamlDisplay>
250270
</StackPanel>
251271
<Border Margin="0 24 0 0" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" Grid.Row="5" />
252272
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}"

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Button.xaml‎

Lines changed: 67 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
BorderBrush="{TemplateBinding BorderBrush}"
6262
x:Name="border"
6363
Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}" />
64-
<ProgressBar x:Name="ProgressBar"
65-
Style="{DynamicResource MaterialDesignLinearProgressBar}"
64+
<ProgressBar x:Name="ProgressBar"
65+
Style="{DynamicResource MaterialDesignLinearProgressBar}"
6666
Minimum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.Minimum)}"
6767
Maximum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.Maximum)}"
6868
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.IndicatorForeground)}"
@@ -73,16 +73,16 @@
7373
Height="{TemplateBinding Height}"
7474
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ButtonBase}}, Path=ActualWidth}"
7575
Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.Opacity)}"
76-
HorizontalAlignment="Left"
76+
HorizontalAlignment="Left"
7777
VerticalAlignment="Center">
7878
</ProgressBar>
7979
</Grid>
8080
</AdornerDecorator>
81-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
81+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
8282
ContentStringFormat="{TemplateBinding ContentStringFormat}"
83-
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
83+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
8484
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
85-
Padding="{TemplateBinding Padding}"
85+
Padding="{TemplateBinding Padding}"
8686
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
8787
</Grid>
8888
<ControlTemplate.Triggers>
@@ -140,10 +140,10 @@
140140
<Border Background="{TemplateBinding Background}" x:Name="border"
141141
CornerRadius="{Binding Path=(wpf:ButtonAssist.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}"
142142
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
143-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
144-
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
143+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
144+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
145145
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
146-
Padding="{TemplateBinding Padding}"
146+
Padding="{TemplateBinding Padding}"
147147
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
148148
</Border>
149149
</Grid>
@@ -230,10 +230,10 @@
230230
<Setter Property="Template">
231231
<Setter.Value>
232232
<ControlTemplate TargetType="ButtonBase">
233-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
234-
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
233+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
234+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
235235
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
236-
Padding="{TemplateBinding Padding}"
236+
Padding="{TemplateBinding Padding}"
237237
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
238238
<ControlTemplate.Triggers>
239239
<Trigger Property="IsEnabled" Value="false">
@@ -271,13 +271,13 @@
271271
<ControlTemplate TargetType="{x:Type ButtonBase}">
272272
<Grid>
273273
<AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(wpf:ShadowAssist.CacheMode)}">
274-
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
274+
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
275275
Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}"
276276
x:Name="border">
277277
</Ellipse>
278278
</AdornerDecorator>
279-
<ProgressBar x:Name="ProgressBar"
280-
Style="{DynamicResource MaterialDesignCircularProgressBar}"
279+
<ProgressBar x:Name="ProgressBar"
280+
Style="{DynamicResource MaterialDesignCircularProgressBar}"
281281
Minimum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.Minimum)}"
282282
Maximum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.Maximum)}"
283283
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.IndicatorForeground)}"
@@ -286,10 +286,10 @@
286286
IsIndeterminate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.IsIndeterminate)}"
287287
Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.Opacity)}"
288288
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ButtonProgressAssist.IsIndicatorVisible), Converter={StaticResource BooleanToVisibilityConverter}}"
289-
Margin="-8"
289+
Margin="-8"
290290
Width="{TemplateBinding Width, Converter={StaticResource MathAddConverter}, ConverterParameter={StaticResource ProgressRingStrokeWidth}}"
291291
Height="{TemplateBinding Height, Converter={StaticResource MathAddConverter}, ConverterParameter={StaticResource ProgressRingStrokeWidth}}"
292-
HorizontalAlignment="Stretch"
292+
HorizontalAlignment="Stretch"
293293
VerticalAlignment="Stretch"
294294
RenderTransformOrigin=".5, .5">
295295
<ProgressBar.RenderTransform>
@@ -299,11 +299,11 @@
299299
</ProgressBar.RenderTransform>
300300
</ProgressBar>
301301
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
302-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
302+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
303303
Clip="{Binding ElementName=GeometryEllipse, Path=RenderedGeometry}" ClipToBounds="True"
304-
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
304+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
305305
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
306-
Padding="{TemplateBinding Padding}"
306+
Padding="{TemplateBinding Padding}"
307307
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
308308
<Ellipse x:Name="GeometryEllipse" Fill="Transparent" IsHitTestVisible="False" Focusable="False" />
309309
</Grid>
@@ -391,4 +391,51 @@
391391
<Setter Property="wpf:ButtonProgressAssist.IndicatorForeground" Value="{DynamicResource PrimaryHueMidBrush}" />
392392
</Style>
393393

394+
<Style x:Key="MaterialDesignIconButton" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource MaterialDesignFlatButton}">
395+
<Setter Property="Padding" Value="0"/>
396+
<Setter Property="Width" Value="48" />
397+
<Setter Property="Height" Value="48" />
398+
<Setter Property="Template">
399+
<Setter.Value>
400+
<ControlTemplate TargetType="{x:Type ButtonBase}">
401+
<ControlTemplate.Resources>
402+
<Style TargetType="wpf:PackIcon">
403+
<Setter Property="Width" Value="24"/>
404+
<Setter Property="Height" Value="24"/>
405+
</Style>
406+
</ControlTemplate.Resources>
407+
<Grid>
408+
<Ellipse
409+
Fill="{TemplateBinding Background}"
410+
x:Name="border"
411+
RenderTransformOrigin="0.5, 0.5">
412+
<Ellipse.RenderTransform>
413+
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.0" ScaleY="1.0" x:Name="CheckedEllipseScale"/>
414+
</Ellipse.RenderTransform>
415+
</Ellipse>
416+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
417+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
418+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
419+
Padding="{TemplateBinding Padding}"
420+
Clip="{Binding ElementName=GeometryEllipse, Path=RenderedGeometry}" ClipToBounds="True"
421+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
422+
<Ellipse x:Name="GeometryEllipse" Fill="Transparent" IsHitTestVisible="False" Focusable="False" />
423+
</Grid>
424+
<ControlTemplate.Triggers>
425+
<Trigger Property="IsMouseOver" Value="true">
426+
<Setter Property="Fill" TargetName="border" Value="{DynamicResource MaterialDesignFlatButtonClick}" />
427+
</Trigger>
428+
<Trigger Property="IsEnabled" Value="false">
429+
<Setter Property="Opacity" Value="0.23"/>
430+
</Trigger>
431+
</ControlTemplate.Triggers>
432+
</ControlTemplate>
433+
</Setter.Value>
434+
</Setter>
435+
</Style>
436+
437+
<Style x:Key="MaterialDesignIconForegroundButton" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource MaterialDesignIconButton}">
438+
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"/>
439+
</Style>
440+
394441
</ResourceDictionary>

0 commit comments

Comments
 (0)