How to build a custom component based on MaterialDesign? - wpf

Question

I'm trying to understand how to build a custom component based on material design, in order to understand how exactly the procedure to achieve that is working I thought to build a simple button that includes text and an icon (remember is just for exercise), so I tried to write both a UserControl and a ResurceDictionary, but so far no luck. My question is, how can I build a custom button based on material design? I want it to maintain all effects and shadows that are shipped with material design. I'll post also what I have in terms of ResurceDictionary.
ResourceDictionary
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:KESS3Mockup">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type local:VerticalButton}" BasedOn="{StaticResource ResourceKey={x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:VerticalButton}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="8*"/>
<RowDefinition Height="8*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Viewbox HorizontalAlignment="Stretch" Grid.Column="1" Grid.Row="1">
<materialDesign:PackIcon Kind="{TemplateBinding Kind}" Foreground="White" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="2">
<TextBox Text="{TemplateBinding Text}" Foreground="White" SelectionBrush="#000078D7" BorderBrush="#00000000" Focusable="False"/>
</Viewbox>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

Answer 1

You can base a new style on an existing style using BasedOn.
<Style TargetType="{x:Type local:VerticalButton}" BasedOn="{StaticResource {x:Type Button}}">
Instead of the type, you can also refer to a different, specific style.
<Style TargetType="{x:Type local:VerticalButton}" BasedOn="{StaticResource MaterialDesignFlatButton}"/>
However, for this to work, the target types must be compatible (either the same type or a base type, e.g. ButtonBase for a Button). You cannot simply create a UserControl and create a style based on a style for a Button. In order to customize a Button, you would have to create a custom control VerticalButton that inherits from Button, which implements the dependency properties and specifics you want.
public class VerticalButton : Button
{
static VerticalButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(VerticalButton), new FrameworkPropertyMetadata(typeof(VerticalButton)));
}
// ...your custom code.
}
Next you would create a Generic.xaml file in the Themes folder in your project (this path and file are named by convention). There you define the default style, which can be based on Material Design.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourProject">
<Style TargetType="{x:Type local:VerticalButton}" BasedOn="{StaticResource {x:Type Button}}">
<!-- ...your style definitions. -->
</Style>
</ResourceDictionary>
This resource dicionary has to be included after the Material Design theme dictionaries in App.xaml. For more information on how to override default Material Design themes, you can refer to the Wiki.
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Please not that although you can base a style on another style, you cannot base one control template on another. That means, if you assign a ControlTemplate in your style it will override the one of the base style. Therefore, if you want to adapt the control template while preserving most of its default visuals and effects, you have to copy it from the Material Design GitHub repository and adapt it to your needs.
For more information on developing custom controls in general see Control authoring overview. Material Design uses the established concepts for themes, styles and templates, so it does not really differ from styling standard WPF controls or building custom controls.
For simple cases of customizing the content of the button, it might be an easier alternative to create a DataTemplate that you assign as a ContentTemplate of the Button, see Data Templating Overview.

Answer 2

When you set the control template, it overrides all the visual styles. It merely carries only the dependency properties. So, it will not carry any shadow or other effects (at least to your new style). however, if such property exists in the VerticalButton class (that you are targeting), then you can reuse such properties and define your own style.