🎨 Fix progress bar foreground and background color for outlined and f…

…lat buttons (#2530) Also includes these variants in the demo app. ref #2481 and #2509.
MaterialDesignInXAML · Dec 29, 2021 · 42c475b · 42c475b
1 parent b1c0642
commit 42c475b
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 2 deletions.
diff --git a/MainDemo.Wpf/Buttons.xaml b/MainDemo.Wpf/Buttons.xaml
@@ -729,6 +729,86 @@
                     </Grid>
                 </smtx:XamlDisplay>
 
+                <smtx:XamlDisplay UniqueKey="buttons_outlined_7" Margin="8 0">
+                    <Grid Width="124">
+                        <!-- raised button with progress, useful to auto dismiss/accept something -->
+                        <Button
+                            Command="{Binding DismissCommand}"
+                            Style="{StaticResource MaterialDesignOutlinedButton}"
+                            HorizontalAlignment="Left"
+                            materialDesign:ButtonProgressAssist.Value="{Binding DismissButtonProgress}"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource BooleanToVisibilityConverter}}"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="DISMISS"/>
+                                <materialDesign:PackIcon
+                                    Margin="4 .5 0 0"
+                                    Kind="Close" />
+                            </StackPanel>
+                        </Button>
+
+                        <TextBlock
+                            Text="{Binding DemoRestartCountdownText}"
+                            VerticalAlignment="Center"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+
+                <smtx:XamlDisplay UniqueKey="buttons_outlined_8" Margin="8 0">
+                    <Grid Width="124">
+                        <Button
+                            Style="{StaticResource MaterialDesignOutlinedButton}"
+                            materialDesign:ButtonProgressAssist.Value="-1"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            materialDesign:ButtonProgressAssist.IsIndeterminate="True"
+                            Content="Indeterminate" Margin="2,0"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+
+                <smtx:XamlDisplay UniqueKey="buttons_flat_bg_7" Margin="8 0">
+                    <Grid Width="124">
+                        <!-- raised button with progress, useful to auto dismiss/accept something -->
+                        <Button
+                            Command="{Binding DismissCommand}"
+                            Style="{StaticResource MaterialDesignFlatButton}"
+                            HorizontalAlignment="Left"
+                            materialDesign:ButtonProgressAssist.Value="{Binding DismissButtonProgress}"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource BooleanToVisibilityConverter}}"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="DISMISS"/>
+                                <materialDesign:PackIcon
+                                    Margin="4 .5 0 0"
+                                    Kind="Close" />
+                            </StackPanel>
+                        </Button>
+
+                        <TextBlock
+                            Text="{Binding DemoRestartCountdownText}"
+                            VerticalAlignment="Center"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+
+                <smtx:XamlDisplay UniqueKey="buttons_flat_bg_8" Margin="8 0">
+                    <Grid Width="124">
+                        <Button
+                            Style="{StaticResource MaterialDesignFlatButton}"
+                            materialDesign:ButtonProgressAssist.Value="-1"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            materialDesign:ButtonProgressAssist.IsIndeterminate="True"
+                            Content="Indeterminate" Margin="2,0"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+            </StackPanel>
+
+            <StackPanel
+                Orientation="Horizontal"
+                Margin="0 24 0 0">
                 <smtx:XamlDisplay UniqueKey="buttons_28" Margin="8 0">
                     <StackPanel Orientation="Horizontal" smtx:XamlDisplay.Ignore="This">
                         <!-- floating action button with progress -->

diff --git a/MaterialDesign3.Demo.Wpf/Buttons.xaml b/MaterialDesign3.Demo.Wpf/Buttons.xaml
@@ -729,6 +729,86 @@
                     </Grid>
                 </smtx:XamlDisplay>
 
+                <smtx:XamlDisplay UniqueKey="buttons_outlined_7" Margin="8 0">
+                    <Grid Width="124">
+                        <!-- raised button with progress, useful to auto dismiss/accept something -->
+                        <Button
+                            Command="{Binding DismissCommand}"
+                            Style="{StaticResource MaterialDesignOutlinedButton}"
+                            HorizontalAlignment="Left"
+                            materialDesign:ButtonProgressAssist.Value="{Binding DismissButtonProgress}"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource BooleanToVisibilityConverter}}"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="DISMISS"/>
+                                <materialDesign:PackIcon
+                                    Margin="4 .5 0 0"
+                                    Kind="Close" />
+                            </StackPanel>
+                        </Button>
+
+                        <TextBlock
+                            Text="{Binding DemoRestartCountdownText}"
+                            VerticalAlignment="Center"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+
+                <smtx:XamlDisplay UniqueKey="buttons_outlined_8" Margin="8 0">
+                    <Grid Width="124">
+                        <Button
+                            Style="{StaticResource MaterialDesignOutlinedButton}"
+                            materialDesign:ButtonProgressAssist.Value="-1"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            materialDesign:ButtonProgressAssist.IsIndeterminate="True"
+                            Content="Indeterminate" Margin="2,0"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+
+                <smtx:XamlDisplay UniqueKey="buttons_flat_bg_7" Margin="8 0">
+                    <Grid Width="124">
+                        <!-- raised button with progress, useful to auto dismiss/accept something -->
+                        <Button
+                            Command="{Binding DismissCommand}"
+                            Style="{StaticResource MaterialDesignFlatButton}"
+                            HorizontalAlignment="Left"
+                            materialDesign:ButtonProgressAssist.Value="{Binding DismissButtonProgress}"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource BooleanToVisibilityConverter}}"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="DISMISS"/>
+                                <materialDesign:PackIcon
+                                    Margin="4 .5 0 0"
+                                    Kind="Close" />
+                            </StackPanel>
+                        </Button>
+
+                        <TextBlock
+                            Text="{Binding DemoRestartCountdownText}"
+                            VerticalAlignment="Center"
+                            Visibility="{Binding ShowDismissButton, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+
+                <smtx:XamlDisplay UniqueKey="buttons_flat_bg_8" Margin="8 0">
+                    <Grid Width="124">
+                        <Button
+                            Style="{StaticResource MaterialDesignFlatButton}"
+                            materialDesign:ButtonProgressAssist.Value="-1"
+                            materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
+                            materialDesign:ButtonProgressAssist.IsIndeterminate="True"
+                            Content="Indeterminate" Margin="2,0"
+                            IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"/>
+                    </Grid>
+                </smtx:XamlDisplay>
+            </StackPanel>
+
+            <StackPanel
+                Orientation="Horizontal"
+                Margin="0 24 0 0">
                 <smtx:XamlDisplay UniqueKey="buttons_28" Margin="8 0">
                     <StackPanel Orientation="Horizontal" smtx:XamlDisplay.Ignore="This">
                         <!-- floating action button with progress -->

diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Button.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Button.xaml
@@ -172,8 +172,8 @@
         <Setter Property="Height" Value="32" />
         <Setter Property="wpf:ButtonAssist.CornerRadius" Value="2" />
         <Setter Property="wpf:RippleAssist.Feedback" Value="{DynamicResource PrimaryHueMidBrush}" />
-        <Setter Property="wpf:ButtonProgressAssist.IndicatorForeground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
-        <Setter Property="wpf:ButtonProgressAssist.IndicatorBackground" Value="{DynamicResource PrimaryHueMidBrush}" />
+        <Setter Property="wpf:ButtonProgressAssist.IndicatorForeground" Value="{DynamicResource PrimaryHueMidBrush}" />
+        <Setter Property="wpf:ButtonProgressAssist.IndicatorBackground" Value="Transparent" />
         <Setter Property="wpf:ButtonProgressAssist.IsIndicatorVisible" Value="False" />
         <Setter Property="wpf:ButtonProgressAssist.Opacity" Value=".4" />        
         <Setter Property="Template">