更新代码背后的按钮样式

时间:2014-06-21 19:49:16

标签: c# xaml button windows-phone-8 styles

我在ButtonStyle1内的XAML中为我的解决方案添加了一个名为PhoneApplicationPage.Resources的样式。我需要修改一些参数,具体取决于应用程序的当前主题,亮或暗。要修改的参数是Background设置器和Background状态下的Pressed

我有三个状态,申请可能在;标准,浅色和深色。对于setter和按下状态,Standard将具有透明背景,而Light将为Color.FromArgb(153, 00, 00, 00),而Dark将为Color.FromArgb(153, 64, 76, 87)

XAML

<Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我在UpdateButtonStyle()

中调用了以下方法OnNavigatedTo

XAML.CS

private void UpdateButtonStyle()
    {
        var style = Application.Current.Resources["ButtonStyle1"] as Style;


        if (Settings.TransparentMode.Value == false) //Standard Theme
        {
            //setter background and pressed background state will be Transparent
        }
        else
        {
            if (Settings.LightTheme.Value == false) //Dark theme
            {
                //setter background and pressed background state will be Color.FromArgb(153, 00, 00, 00)
            }
            else //Light theme
            {
                //setter background and pressed background state will be Color.FromArgb(153, 64, 76, 87)
            }
        }
    }

如何在相应的代码中调整这些参数?

1 个答案:

答案 0 :(得分:0)

将背景绑定到theme属性并使用转换器返回相应的画笔。

public class ThemeToBackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, 
        System.Globalization.CultureInfo culture)
    {
        var theme = (Theme)value;
        switch (theme.Value)
        {
            case Theme.Standard:
                return new SolidColorBrush(Colors.Transparent);
            case Theme.Dark:
                return new SolidColorBrush(153, 64, 76, 87);
            case Theme.Light:
                return new SolidColorBrush(153, 00, 00, 00);
        }        
    }

    public object ConvertBack(object value, Type targetType, object parameter, 
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

XAML

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames 
            Storyboard.TargetProperty="Foreground" 
            Storyboard.TargetName="ContentContainer">
            <DiscreteObjectKeyFrame 
                KeyTime="0" 
                Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames 
            Storyboard.TargetProperty="Background" 
            Storyboard.TargetName="ButtonBackground">
            <DiscreteObjectKeyFrame 
                KeyTime="0" 
                Value="{Binding DataContext.ThemeProperty, 
                                ElementName=yourPhoneApplicationPageName,  
                                Converter={StaticResource ThemeToBackgroundConverter}}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

<Grid Background="{Binding ThemeProperty, Converter={StaticResource ThemeToBackgroundConverter}}"/>