Question

我有一个UWP问题。如何禁用按钮的样式（IsEnabled = False）？

Answer 1

Microsoft将VisualStateManager（从Silverlight中获知）添加到Windows Universal Plattform。其目的是处理不同状态的控件的外观。按钮的“禁用”状态就是一个很好的例子。控件的可视状态在其ControlTemplate中定义。要自定义这些状态，最简单的方法是右键单击设计器中的按钮，然后选择“编辑模板”，然后选择“编辑副本...”。 enter image description here

这样做是将该控件的默认模板复制到所选位置。如果控件是Button，您将拥有如下样式资源：

<Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="Padding" Value="8,4,8,4"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="UseSystemFocusVisuals" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

现在您可以看到Button的视觉状态以及与它们相关联的setter / animations。您可以手动修改它们，也可以打开Microsoft Blend 2015.它具有很强的设计视觉状态的功能。右键单击按钮，然后在Blend中单击“编辑模板” - >“编辑当前”，您可以在状态选项卡（左侧）上看到您的控件具有的所有状态。

enter image description here

当您选择“已禁用”状态时，您将在设计器窗口周围看到一个红色边框。左上角的文字告诉您“已禁用状态记录...”。这意味着控制树中对象的每个更改都将进入控件的“已禁用”状态。例如，您可以为禁用状态更改Contentpresenter的前景颜色。以下动画将添加到您的XAML：

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF225EFF"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

有关VisualSateManager的更多信息以及从何处开始，请查看New XAML Tools in Visual Studio 2015 and Blend Video on Channel9。

希望这是有帮助的

Answer 2

这是你怎么做的。

<StackPanel>

    <Button x:Name="button" Content="Click Me" 
            IsEnabled="{Binding IsChecked, ElementName=checkBox}">
        <Interactivity:Interaction.Behaviors>

            <Core:DataTriggerBehavior Binding="{Binding IsEnabled,
                ElementName=button, Mode=OneWay}" Value="True">
                <Core:ChangePropertyAction PropertyName="Opacity" Value="1"/>
            </Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding IsEnabled, 
                ElementName=button, Mode=OneWay}" Value="False">
                <Core:ChangePropertyAction PropertyName="Opacity" Value=".5"/>
            </Core:DataTriggerBehavior>

        </Interactivity:Interaction.Behaviors>
    </Button>

    <CheckBox x:Name="checkBox" IsChecked="True" />

</StackPanel>

不要忘记您需要引用行为SDK。

祝你好运！

按钮在禁用时更改样式（IsEnabled = False）

2 个答案: