Xamarin UWP工具栏图标黑白显示异常问题求助

Hey there! Let's figure out how to fix that UWP toolbar icon color quirk you're dealing with. Android's behaving as expected, so this is definitely tied to UWP's default control styles overriding your icon's intended colors. Here are a few straightforward solutions to get things consistent:

1. Explicitly set the icon's color (quickest fix) #

UWP's toolbar controls default to using the system's foreground color (white in most cases) unless you explicitly override it. If you're using a font-based icon (like from Font Awesome or Material Icons), directly set the Color property on your FontImageSource:

<ToolbarItem>
    <ToolbarItem.Icon>
        <FontImageSource 
            FontFamily="YourIconFont" 
            Glyph="&#xe123;" 
            Color="#212121" /> <!-- Set your desired default color here -->
    </ToolbarItem.Icon>
</ToolbarItem>

If you're using a bitmap image (PNG/SVG), disable UWP's automatic tinting to preserve your icon's original colors:

<ToolbarItem>
    <ToolbarItem.Icon>
        <Image Source="your_icon.png" TintMode="None" />
    </ToolbarItem.Icon>
</ToolbarItem>

2. Override UWP's global ToolbarItem style (for multiple icons) #

If you have multiple toolbar icons that need the same behavior, set a global style in your UWP project's Resources to avoid repeating code:

<!-- Add this in your UWP project's App.xaml or page-level Resources -->
<Style TargetType="ToolbarItem">
    <Setter Property="Foreground" Value="#212121" /> <!-- Default icon color -->
    <Style.Triggers>
        <Trigger Property="IsPointerOver" Value="True">
            <Setter Property="Foreground" Value="#212121" /> <!-- Keep color same on hover, or set a different one -->
        </Trigger>
    </Style.Triggers>
</Style>

This will apply the color rules to every ToolbarItem in your UWP app automatically.

3. Customize states with VisualStateManager (fine-grained control) #

For full control over how your icon behaves in different states (normal, hover, pressed), define a custom control template with VisualStateManager:

<ToolbarItem>
    <ToolbarItem.ControlTemplate>
        <ControlTemplate>
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Target="IconElement.Foreground" Value="#212121" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Target="IconElement.Foreground" Value="#0066cc" /> <!-- Custom hover color -->
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <FontImageSource x:Name="IconElement" 
                                FontFamily="YourIconFont" 
                                Glyph="&#xe123;" />
            </Grid>
        </ControlTemplate>
    </ToolbarItem.ControlTemplate>
</ToolbarItem>

Start with the first solution—it's the fastest to implement. If you need consistency across all toolbar icons, go with the global style. For unique state behaviors, the VisualStateManager approach gives you full flexibility.

内容的提问来源于stack exchange，提问作者Tomasz Tomczykiewicz