search

lepoco / wpfui

WPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.
https://wpfui.lepo.co
MIT License
7.04k stars 667 forks source link

Title bar icons are the wrong color #1035

Closed Alessandro-Vecchio closed 2 months ago

Alessandro-Vecchio commented 3 months ago

Describe the bug

Using the dark theme, the title bar icons are shown in black and only turn white when you hover the mouse over them

To Reproduce

use the dark theme for the app

Expected behavior

the icons should be white when using the dark theme, the icons are white in the attached photo because I hovered the mouse over them (first and third button)

Screenshots

Screenshot 2024-04-02 203606

OS version

Windows 11 23H2 build 22631.3374

.NET version

v 8.0 and v7.0

WPF-UI NuGet version

v 3.0.3

Additional context

No response

Alessandro-Vecchio commented 3 months ago

I would also add that in the preview view in visual studio, using the dark theme, everything is shown in white.

Which versions do you recommend using to avoid these problems or is there something I'm doing wrong?

Screenshot 2024-04-02 210155

andrewpros commented 3 months ago

I can confirm the bug, i have the same thing, it was working before 3.0.2 if i recall.

Dhruv5597 commented 3 months ago

I can confirm the bug, i have the same thing, it was working before 3.0.2 if i recall.

I think, I found the reason.

In 3.0.2 Default style for TitleBarButton have <Path x:Name="CanvasPath" Fill="{TemplateBinding RenderButtonsForeground}" /> which earlier was <Path x:Name="CanvasPath" Fill="{TemplateBinding ButtonsForeground}" />.

If you do not have any theme change for application at runtime then use following code.

For Reference : Commit : d1fa429 Message : Fix TitleBarButton Foreground error when change theme

Also TitleBarButton Default style have <Setter Property="MouseOverButtonsForeground" Value="{Binding Path=MouseOverButtonsForeground, RelativeSource={RelativeSource AncestorType={x:Type controls:TitleBar}}}" /> but there is no MouseOverButtonsForeground property on TitleBar to bind. Remove above lines from style if you are facing xamlbinding failures.

add following code

Namespaces :

xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
xmlns:controls="clr-namespace:Wpf.Ui.Controls;assembly=Wpf.Ui"

TitleBar.Resources :

<ui:TitleBar.Resources>
    <Style TargetType="{x:Type controls:TitleBarButton}">
        <Setter Property="Width"
                Value="44" />
        <Setter Property="Height"
                Value="30" />
        <Setter Property="MouseOverBackground"
                Value="{Binding Path=ButtonsBackground, RelativeSource={RelativeSource AncestorType={x:Type controls:TitleBar}}}" />
        <Setter Property="ButtonsForeground"
                Value="{Binding Path=ButtonsForeground, RelativeSource={RelativeSource AncestorType={x:Type controls:TitleBar}}}" />
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="FocusVisualStyle"
                Value="{DynamicResource DefaultControlFocusVisualStyle}" />
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="OverridesDefaultStyle"
                Value="True" />
        <Setter Property="Command"
                Value="{Binding Path=TemplateButtonCommand, RelativeSource={RelativeSource AncestorType={x:Type controls:TitleBar}}}" />
        <Setter Property="KeyboardNavigation.IsTabStop"
                Value="True" />
        <Setter Property="Focusable"
                Value="False" />
        <Setter Property="Canvas.ZIndex"
                Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:TitleBarButton}">
                    <Grid x:Name="LayoutRoot"
                          Background="{TemplateBinding Background}">
                        <Viewbox x:Name="ViewBox"
                                 Width="11"
                                 Height="11"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 Focusable="False"
                                 RenderOptions.BitmapScalingMode="HighQuality">
                            <Canvas x:Name="Canvas"
                                    Width="72"
                                    Height="72"
                                    Focusable="False">
                                <Path x:Name="CanvasPath"
                                      Fill="{TemplateBinding ButtonsForeground}" />
                            </Canvas>
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ButtonType"
                                 Value="{x:Static controls:TitleBarButtonType.Help}">
                            <Setter Property="CommandParameter"
                                    Value="{x:Static controls:TitleBarButtonType.Help}" />
                            <Setter TargetName="ViewBox"
                                    Property="Width"
                                    Value="13" />
                            <Setter TargetName="ViewBox"
                                    Property="Height"
                                    Value="13" />
                            <Setter TargetName="Canvas"
                                    Property="Width"
                                    Value="24" />
                            <Setter TargetName="Canvas"
                                    Property="Height"
                                    Value="41" />
                            <Setter TargetName="CanvasPath"
                                    Property="Data"
                                    Value="M20.56,11.57c0-1.19-.24-2.31-.71-3.36-.47-1.05-1.11-1.96-1.92-2.74-.8-.78-1.74-1.4-2.81-1.85-1.07-.45-2.2-.68-3.37-.68s-2.37,.23-3.44,.69c-1.07,.46-2,1.09-2.8,1.88s-1.42,1.73-1.88,2.8c-.46,1.07-.69,2.22-.69,3.44,0,.4-.15,.74-.44,1.03s-.64,.44-1.03,.44c-.49,0-.86-.17-1.1-.52-.25-.34-.37-.74-.37-1.18,0-1.59,.32-3.09,.95-4.49,.63-1.4,1.49-2.62,2.57-3.66,1.08-1.04,2.33-1.86,3.74-2.47,1.42-.6,2.91-.91,4.49-.91s3.07,.3,4.49,.91c1.42,.6,2.66,1.43,3.74,2.47,1.08,1.04,1.93,2.26,2.57,3.66,.63,1.4,.95,2.9,.95,4.49,0,1.24-.13,2.32-.39,3.25-.26,.93-.63,1.77-1.12,2.54-.49,.77-1.08,1.49-1.78,2.18-.7,.69-1.48,1.42-2.35,2.2-.44,.4-.88,.78-1.31,1.16-.43,.38-.84,.78-1.24,1.21-.5,.55-.89,1.08-1.17,1.59-.28,.51-.48,1.03-.62,1.56-.14,.53-.22,1.09-.25,1.69-.03,.6-.05,1.25-.05,1.95,0,.4-.15,.74-.44,1.03-.29,.29-.64,.44-1.03,.44-.34,0-.6-.06-.79-.18-.19-.12-.34-.29-.44-.49-.1-.21-.17-.44-.2-.7-.03-.26-.05-.52-.05-.78v-.78c0-1.21,.15-2.28,.44-3.2,.29-.93,.68-1.76,1.16-2.5,.48-.74,1.03-1.41,1.65-2.02,.62-.6,1.25-1.19,1.89-1.74,.64-.56,1.27-1.11,1.88-1.66,.61-.55,1.16-1.15,1.64-1.8,.48-.65,.87-1.37,1.17-2.16,.3-.79,.45-1.69,.45-2.72Zm-11.02,27.36c0-.61,.21-1.13,.64-1.56,.43-.43,.95-.64,1.56-.64s1.13,.21,1.56,.64c.43,.43,.64,.95,.64,1.56s-.21,1.13-.64,1.56c-.43,.43-.95,.64-1.56,.64s-1.13-.21-1.56-.64c-.43-.43-.64-.95-.64-1.56Z" />
                        </Trigger>
                        <Trigger Property="ButtonType"
                                 Value="{x:Static controls:TitleBarButtonType.Minimize}">
                            <Setter Property="CommandParameter"
                                    Value="{x:Static controls:TitleBarButtonType.Minimize}" />
                            <Setter TargetName="Canvas"
                                    Property="Width"
                                    Value="72" />
                            <Setter TargetName="Canvas"
                                    Property="Height"
                                    Value="8" />
                            <Setter TargetName="CanvasPath"
                                    Property="Data"
                                    Value="M3.59,7.21A3.56,3.56,0,0,1,2.2,6.93a3.66,3.66,0,0,1-1.15-.78A3.88,3.88,0,0,1,.28,5,3.42,3.42,0,0,1,0,3.62,3.45,3.45,0,0,1,.28,2.23a4.12,4.12,0,0,1,.77-1.16A3.52,3.52,0,0,1,2.2.28,3.39,3.39,0,0,1,3.59,0H68.41A3.39,3.39,0,0,1,69.8.28,3.52,3.52,0,0,1,71,1.07a4.12,4.12,0,0,1,.77,1.16A3.45,3.45,0,0,1,72,3.62,3.42,3.42,0,0,1,71.72,5,3.88,3.88,0,0,1,71,6.15a3.66,3.66,0,0,1-1.15.78,3.56,3.56,0,0,1-1.39.28Z" />
                        </Trigger>
                        <Trigger Property="ButtonType"
                                 Value="{x:Static controls:TitleBarButtonType.Restore}">
                            <Setter Property="CommandParameter"
                                    Value="{x:Static controls:TitleBarButtonType.Restore}" />
                            <Setter TargetName="CanvasPath"
                                    Property="Data"
                                    Value="M10.62,72a9.92,9.92,0,0,1-4-.86A11.15,11.15,0,0,1,.86,65.43,9.92,9.92,0,0,1,0,61.38V25A9.86,9.86,0,0,1,.86,21,11.32,11.32,0,0,1,3.18,17.6a11,11,0,0,1,3.38-2.32,9.68,9.68,0,0,1,4.06-.87H47a9.84,9.84,0,0,1,4.08.87A11,11,0,0,1,56.72,21,9.84,9.84,0,0,1,57.59,25V61.38a9.68,9.68,0,0,1-.87,4.06,11,11,0,0,1-2.32,3.38A11.32,11.32,0,0,1,51,71.14,9.86,9.86,0,0,1,47,72Zm36.17-7.21a3.39,3.39,0,0,0,1.39-.28,3.79,3.79,0,0,0,1.16-.77,3.47,3.47,0,0,0,1.07-2.53v-36a3.55,3.55,0,0,0-.28-1.41,3.51,3.51,0,0,0-.77-1.16,3.67,3.67,0,0,0-1.16-.77,3.55,3.55,0,0,0-1.41-.28h-36a3.45,3.45,0,0,0-1.39.28,3.59,3.59,0,0,0-1.14.79,3.79,3.79,0,0,0-.77,1.16,3.39,3.39,0,0,0-.28,1.39v36a3.45,3.45,0,0,0,.28,1.39A3.62,3.62,0,0,0,9.4,64.51a3.45,3.45,0,0,0,1.39.28Zm18-43.45a13.14,13.14,0,0,0-1.16-5.5,14.41,14.41,0,0,0-3.14-4.5,15,15,0,0,0-4.61-3,14.14,14.14,0,0,0-5.5-1.1H15A10.73,10.73,0,0,1,21.88.51,10.93,10.93,0,0,1,25.21,0H50.38a20.82,20.82,0,0,1,8.4,1.71A21.72,21.72,0,0,1,70.29,13.18,20.91,20.91,0,0,1,72,21.59v25.2a10.93,10.93,0,0,1-.51,3.33A10.71,10.71,0,0,1,70,53.05a10.84,10.84,0,0,1-2.28,2.36,10.66,10.66,0,0,1-3,1.58Z" />
                        </Trigger>
                        <Trigger Property="ButtonType"
                                 Value="{x:Static controls:TitleBarButtonType.Maximize}">
                            <Setter Property="CommandParameter"
                                    Value="{x:Static controls:TitleBarButtonType.Maximize}" />
                            <Setter TargetName="CanvasPath"
                                    Property="Data"
                                    Value="M10.62,72a9.92,9.92,0,0,1-4-.86A11.15,11.15,0,0,1,.86,65.43,9.92,9.92,0,0,1,0,61.38V10.62a9.92,9.92,0,0,1,.86-4A11.15,11.15,0,0,1,6.57.86a9.92,9.92,0,0,1,4-.86H61.38a9.92,9.92,0,0,1,4.05.86,11.15,11.15,0,0,1,5.71,5.71,9.92,9.92,0,0,1,.86,4V61.38a9.92,9.92,0,0,1-.86,4.05,11.15,11.15,0,0,1-5.71,5.71,9.92,9.92,0,0,1-4.05.86Zm50.59-7.21a3.45,3.45,0,0,0,1.39-.28,3.62,3.62,0,0,0,1.91-1.91,3.45,3.45,0,0,0,.28-1.39V10.79a3.45,3.45,0,0,0-.28-1.39A3.62,3.62,0,0,0,62.6,7.49a3.45,3.45,0,0,0-1.39-.28H10.79a3.45,3.45,0,0,0-1.39.28A3.62,3.62,0,0,0,7.49,9.4a3.45,3.45,0,0,0-.28,1.39V61.21a3.45,3.45,0,0,0,.28,1.39A3.62,3.62,0,0,0,9.4,64.51a3.45,3.45,0,0,0,1.39.28Z" />
                        </Trigger>
                        <Trigger Property="ButtonType"
                                 Value="{x:Static controls:TitleBarButtonType.Close}">
                            <Setter Property="CommandParameter"
                                    Value="{x:Static controls:TitleBarButtonType.Close}" />
                            <Setter TargetName="CanvasPath"
                                    Property="Data"
                                    Value="M36,41.1,6.15,71a3.44,3.44,0,0,1-2.53,1A3.55,3.55,0,0,1,0,68.38a3.44,3.44,0,0,1,1.05-2.53L30.9,36,1.05,6.15A3.49,3.49,0,0,1,0,3.59,3.51,3.51,0,0,1,.28,2.18,3.42,3.42,0,0,1,1.05,1,3.82,3.82,0,0,1,2.21.28,3.58,3.58,0,0,1,3.62,0,3.44,3.44,0,0,1,6.15,1.05L36,30.9,65.85,1.05a3.49,3.49,0,0,1,2.56-1A3.39,3.39,0,0,1,69.8.28,3.8,3.8,0,0,1,71,1.05a3.8,3.8,0,0,1,.77,1.15A3.39,3.39,0,0,1,72,3.59a3.49,3.49,0,0,1-1,2.56L41.1,36,71,65.85a3.44,3.44,0,0,1,1,2.53,3.58,3.58,0,0,1-.28,1.41A3.82,3.82,0,0,1,71,71a3.42,3.42,0,0,1-1.14.77,3.66,3.66,0,0,1-4-.77Z" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ui:TitleBar.Resources>
Difegue commented 2 months ago

I found that just setting RenderButtonsForeground works instead of duplicating the entire template: 

<Style TargetType="ui:TitleBarButton" BasedOn="{StaticResource {x:Type ui:TitleBarButton}}">
    <!-- https://github.com/lepoco/wpfui/issues/1035 -->
    <Setter Property="RenderButtonsForeground" Value="{ui:ThemeResource TextFillColorPrimaryBrush}" />
</Style>

The property gets overridden when you hover over the buttons with the mouse, but since the bug only happens on initialization it's fine

Dhruv5597 commented 2 months ago

I think the issue is resolved in nuget v3.0.4. I am using the same version & it is working as i want.

Difegue commented 2 months ago

Right that makes sense, I had to downgrade to 3.0.3 due to the issue with high contrast themes.