(GH-3349) Fix disable content of ToggleButton & Button when using circle style

[mgnslndh]

Describe the changes you have made to improve this project

• Added setter for the Foreground property to MahApps.Styles.ToggleButton.Circle when IsEnabled=False
• Added setter for the Foreground property to MahApps.Styles.Button.Circle when IsEnabled=False
• Updated demo with enabled/disabled version of MahApps.Styles.Button.Circle (current demo only display a custom derived style for Accent color)

Closed Issues

Closes #3349

[timunie]

Hi @mgnslndh for other controls MahApps uses an opaque overlay over the button /control. I don't have a PC right now but I think I saw it at the
SquareButton. What do you think? I will show you the file as soon as my Internet is back. 😄

Happy coding
Tim

[mgnslndh]

@timunie thanks for the feedback!

This was just a quick fix using the same solution as found on other button styles:

MahApps.Metro/src/MahApps.Metro/Styles/Controls.Buttons.xaml

Lines 63 to 65 in e59402c

	<Trigger Property="IsEnabled" Value="False">
	<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.Gray2}" />
	</Trigger>

MahApps.Metro/src/MahApps.Metro/Styles/Controls.Buttons.xaml

Lines 141 to 143 in e59402c

	<Trigger Property="IsEnabled" Value="False">
	<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.Gray2}" />
	</Trigger>

MahApps.Metro/src/MahApps.Metro/Styles/Controls.Buttons.xaml

Lines 249 to 251 in e59402c

	<Trigger Property="IsEnabled" Value="False">
	<Setter Property="Foreground" Value="#ADADAD" />
	</Trigger>

I'm not aware of an easy way of doing an overlay of an elliptical control with transparent background.

Using an overlay like for the default button style probably works well because it is rectangular and the whole content area is covered by the disabled state.

MahApps.Metro/src/MahApps.Metro/Styles/Controls.Buttons.xaml

Lines 412 to 417 in e59402c

	<Border x:Name="DisabledVisualElement"
	Background="{DynamicResource MahApps.Brushes.Controls.Disabled}"
	CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.CornerRadius), Mode=OneWay}"
	IsHitTestVisible="False"
	Opacity="0"
	SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

Not sure that is how the circle variant is supposed to look. Disabled state covering the whole circle. This is the expected result from the original issue:

Do you have any suggestions?

[punker76]

@mgnslndh your changes have been merged, thanks for your contribution 👍

I added 2 more samples to the demo which shows the workaround for disabled Buttons with custom Foreground (and respect the changes from GH-3121, GH-3101).

            <StackPanel Margin="{StaticResource ControlMargin}"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                <ToggleButton Width="48"
                              Height="48"
                              Margin="4"
                              Foreground="{DynamicResource MahApps.Brushes.Accent}"
                              Style="{DynamicResource MahApps.Styles.ToggleButton.Circle}">
                    <ToggleButton.ContentTemplate>
                        <DataTemplate>
                            <iconPacks:PackIconModern Width="20"
                                                      Height="20"
                                                      Kind="City" />
                        </DataTemplate>
                    </ToggleButton.ContentTemplate>
                </ToggleButton>
                <ToggleButton Width="48"
                              Height="48"
                              Margin="4"
                              Foreground="{DynamicResource MahApps.Brushes.Accent}"
                              IsEnabled="False"
                              Style="{DynamicResource MahApps.Styles.ToggleButton.Circle}">
                    <ToggleButton.ContentTemplate>
                        <DataTemplate>
                            <iconPacks:PackIconModern Width="20"
                                                      Height="20"
                                                      Kind="City" />
                        </DataTemplate>
                    </ToggleButton.ContentTemplate>
                </ToggleButton>
            </StackPanel>

            <StackPanel Margin="{StaticResource ControlMargin}"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                <Button Width="48"
                        Height="48"
                        Margin="4"
                        Foreground="{DynamicResource MahApps.Brushes.Accent}"
                        Style="{StaticResource MahApps.Styles.Button.Circle}">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <iconPacks:PackIconModern Width="20"
                                                      Height="20"
                                                      Kind="City" />
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>
                <Button Width="48"
                        Height="48"
                        Margin="4"
                        Foreground="{DynamicResource MahApps.Brushes.Accent}"
                        IsEnabled="False"
                        Style="{StaticResource MahApps.Styles.Button.Circle}">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <iconPacks:PackIconModern Width="20"
                                                      Height="20"
                                                      Kind="City" />
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>
            </StackPanel>

[mgnslndh]

Nice @punker76! Moving to 2.0.0 release one issue at a time :)

[timunie]

Hello @mgnslndh ,

just for information you can find my first idea below:

<Ellipse x:Name="PART_Overlay"
         Stroke="{DynamicResource MahApps.Brushes.White}"
         Fill="{DynamicResource MahApps.Brushes.White}"
         Opacity="0.8"
         Visibility="Collapsed"
         StrokeThickness="{Binding RelativeSource={x:Static RelativeSource.TemplatedParent}, Path=BorderThickness, Converter={StaticResource BorderThicknessToStrokeThicknessConverter}}" />

[...]

<Trigger Property="IsEnabled" Value="False">
    <Setter TargetName="PART_Overlay" Property="Visibility" Value="Visible" />
</Trigger>

I have to agree that your and @punker76 's solution looks much nicer! Thank you 👍

Happy coding
Tim