XAML Toolkit MaterialDesign Button Override issue

86 views Asked by At

I wanted to override the Button controls based on MaterialDesignRaisedButton. I had to make some modifications based on their GitHub source to change the text colour of the button, as I also overrided the TextBlock control with a different foreground colour, which the button will use instead of its Foreground property. This worked fine if I only used a PackIcon or Text in the button. However, if I want to have a button with both an icon and a name, I have to implement a PackIcon and an accompanying TextBlock in a StackPanel, resulting only the PackIcon will use the foreground colour defined, and the TextBlock will used the style of the overrided TextBlock.

The overrided Button (I included the modified part from the template only, the rest of the template remains the same):

xmlns:wpf="http://materialdesigninxaml.net/winfx/xaml/themes"


<Style BasedOn="{StaticResource MaterialDesignRaisedButton}"
       TargetType="{x:Type Button}">
     <Setter Property="Template">
            <Setter.Value>
                    :
                    :
                    :
                <wpf:Ripple Padding="{TemplateBinding Padding}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"                       
                    ContentStringFormat="{TemplateBinding ContentStringFormat}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Focusable="False"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">    

                      <wpf:Ripple.Clip>
                            <MultiBinding Converter="{StaticResource BorderClipConverter}">
                                  <Binding ElementName="border" Path="ActualWidth" />
                                  <Binding ElementName="border" Path="ActualHeight" />           
                                  <Binding ElementName="border" Path="CornerRadius" />
                                  <Binding ElementName="border" Path="BorderThickness" />
                             </MultiBinding>
                      </wpf:Ripple.Clip>
                                
                    <!-- THIS IS THE PART THAT AFFECTS THE TEXT COLOUR-->
                    <wpf:Ripple.Content>
                       <ContentPresenter ContentSource="Content" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center">
                              <ContentPresenter.Resources>
                                   <Style TargetType="TextBlock">
                                         <Setter Property="Foreground" Value="#28A6BF" />
                                   </Style>
                              </ContentPresenter.Resources>
                        </ContentPresenter>
                     </wpf:Ripple.Content>
                 </wpf:Ripple>
....

displaying the buttons:

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

<Button Content="Button 1" Margin="1"/>
<Button>
     <StackPanel Orientation="Horizontal">
          <materialDesign:PackIcon Kind="Plus" Margin="4"/>
          <TextBlock Text="Button 2"/>
     </StackPanel>
</Button>
<Button>
     <StackPanel Orientation="Horizontal">
          <TextBlock Text="Button 3"/>
          <materialDesign:PackIcon Kind="Plus" Margin="4"/>
     </StackPanel>
</Button>

The resulting buttons: enter image description here

Ideally they should have the same foreground colour. It should be possible to define the style of the TextBlock used in the buttons separately but I would keep that as a last resort as it seems inelegant.

0

There are 0 answers