应用文化上的 WinRT XAML AppBarButton UI 样式问题已更改答案

【问题标题】：WinRT XAML AppBarButton UI style issue on App Culture changed应用文化上的 WinRT XAML AppBarButton UI 样式问题已更改
【发布时间】：2016-04-29 08:45:14
【问题描述】：

我有两个自定义应用栏按钮，如下图所示。这些按钮的样式写在 App.xaml 页面中。更改应用程序/设备语言时，按钮样式会失真。在比较和分析我之前准备的不同构建时，我发现在我在 App.xaml 中引入以下语言文化覆盖更改之前，样式运行良好

CultureInfo ci = new CultureInfo(currentAppLanguage);
Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = ci.Name;
CultureInfo.DefaultThreadCurrentCulture = ci;
CultureInfo.DefaultThreadCurrentUICulture = ci;

currentAppLanguage 的值对应的是应用程序/设备的语言

这种文化更新很重要，因为一些控件（如 Datepicker 等）依赖于这种文化变化来根据所选语言进行翻译。

错误：

正确：

该页面在英语文化中运行良好。但是当用户通过应用程序或手机更新语言时，按钮样式会中断。

当应用加载时，我会根据所选语言覆盖主要语言文化。文化变化是否有可能影响 XAML 样式和元素？

任何建议都会有很大帮助。提前致谢。

下面是应用栏按钮控件和样式

按钮：

    <AppBarButton 
        Visibility="{Binding CanReject, Converter={StaticResource BoolToVisibilityConverter}}"
        x:Name="abReject"
        Grid.Column="3"
        Height="62"
        Width="62"
        Style="{StaticResource RejectAppBarButtonStyle}"
        IsEnabled="{Binding LoadedApproval.ApprovalState, Converter={StaticResource StringComparerToBoolConverter}, ConverterParameter=Pending}"
        BorderBrush="{StaticResource DictationGray}" 
        BorderThickness="2"
        Foreground="White"
        Background="{StaticResource ApprovalRejectRed}"
        Margin="0,0">
            <Interactivity:Interaction.Behaviors>
               <Core:EventTriggerBehavior EventName="Click">
                   <Core:GoToStateAction StateName="Rejecting" UseTransitions="True"/>
                   </Core:EventTriggerBehavior>
             </Interactivity:Interaction.Behaviors>
     </AppBarButton>

风格：

<Style x:Key="RejectAppBarButtonStyle" TargetType="AppBarButton">
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton" >
                <Grid x:Name="RootGrid" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ApplicationViewStates">
                            <VisualState x:Name="FullSize"/>
                            <VisualState x:Name="Compact">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TextLabel">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <RepositionThemeAnimation TargetName="RootGrid"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointOverOverlay"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="RootGrid"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OuterEllipse">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApprovalRejectRed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="PointerFocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse 
                        x:Name="OuterEllipse"
                        Height="{TemplateBinding Height}" 
                        Width="{TemplateBinding Width}" 
                        Stroke="{TemplateBinding BorderBrush}"
                        StrokeThickness="2" 
                        UseLayoutRounding="True">
                    </Ellipse>
                    <Grid>
                        <Ellipse 
                            x:Name="BackgroundEllipse"
                            Height="{Binding Height, Converter={StaticResource ArithmeticOperationConverter}, ConverterParameter=0.78, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                            Width="{Binding Width, Converter={StaticResource ArithmeticOperationConverter}, ConverterParameter=0.78, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                            Fill="{TemplateBinding Background}"
                            UseLayoutRounding="True">
                        </Ellipse>
                        <Ellipse 
                            x:Name="PointOverOverlay"
                            Opacity="0"
                            Height="{Binding Height, Converter={StaticResource ArithmeticOperationConverter}, ConverterParameter=0.78, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                            Width="{Binding Width, Converter={StaticResource ArithmeticOperationConverter}, ConverterParameter=0.78, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                            Fill="{StaticResource PointOverShade}"
                            UseLayoutRounding="True">
                        </Ellipse>
                        <Path 
                            x:Name="Content"
                            Data="M1.5,1.5 L40.392,40.391 M1.5,40.391 L40.392,1.5" 
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            StrokeStartLineCap="Round" 
                            Stretch="Uniform" 
                            StrokeEndLineCap="Round" 
                            Stroke="{TemplateBinding Foreground}" 
                            StrokeThickness="3" 
                            StrokeLineJoin="Round" 
                            Height="{Binding Height, Converter={StaticResource ArithmeticOperationConverter}, ConverterParameter=0.33, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                            Width="{Binding Width, Converter={StaticResource ArithmeticOperationConverter}, ConverterParameter=0.33, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                        </Path>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

我不太确定，你的风格是什么样的？
我不认为改变文化会影响 XAML 样式和元素，您可以将您的 XAML 代码发布为这两个按钮的样式吗？这听起来像是一个奇怪的问题。你把你的风格放在资源文件里了吗？
@GraceFeng-MSFT。谢谢回复。我在我的帖子中添加了上面的代码。我指向文化的原因是因为没有此文化更新的构建版本适用于所有语言。
@GraceFeng-MSFT 是否可以仅将文化覆盖添加到特定页面或仅在页面之间切换文化？
@Sriram，我无法 100% 重现您的问题，我自己完成了转换器部分，但有一些静态资源，如“{StaticResource PointOverShade}”，我不知道。而您发布的 C# 代码，您的意思是此代码在 App.xaml.cs 文件中？也许在OnLaunched 方法中？您是否有可能在其中定义静态资源的资源文件，并且当您更改文化时，该资源文件也会更改？太奇怪了，我不知道为什么，我很抱歉。

标签： c# xaml windows-runtime win-universal-app

【解决方案1】：

我能够找到问题发生的位置。那是在转换器类 ArithmeticOperationConverter 中。下面是转换方法。

public object Convert(object value, Type targetType, object parameter, string language)
{
    if (parameter == null)
        return value;

    Double val;
    Double param;

    if (Double.TryParse(value.ToString(), out val) && Double.TryParse(parameter.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture, out param))
    {
        switch (Mode)
        {
            case (ArithmeticMode.Addition):
                return val + param;
            case (ArithmeticMode.Subtratction):
                return val - param;
            case (ArithmeticMode.Multiplication):
                return val * param;
            case (ArithmeticMode.Division):
                return val / param;
            default:
                return val;
        }
    }
    else
        return value;
}

这里是 TryParse() 方法，它在 if 条件导致问题时解析参数值。传递的参数字符串值（例如）是“0.78”，结果是 78.0 而不是 0.78，导致 UI 失真。 发生这种情况是因为数字符号之间的文化差异。我在 TryParse() 方法中添加了 CultureInfo.InvariantCulture 参数，它解决了问题。

感谢您的建议@GraceFeng-MSFT

【讨论】：