Silverlight CheckBox

时间:2012-03-08 12:53:39

标签: silverlight

我想在复选时更改复选框的背景颜色而不是显示图标,但我不知道如何执行此操作。我试图创建一个具有不同背景颜色的新“矩形”,并在VisualState上调用他“Checked”,但它没有用。

我的代码:

    <Style TargetType="CheckBox">
    <Setter Property="Background" Value="{StaticResource CheckBoxBackgroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxBorderBrush}" />
    <Setter Property="Foreground" Value="{StaticResource NormalFontBrush}" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="Padding" Value="6,1,0,0" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="13" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" />
                                    <DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CheckIcon" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked" />
                            <VisualState x:Name="Indeterminate">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="IndeterminateIcon" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid" />
                            <VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <System:Boolean>True</System:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Height="12" HorizontalAlignment="Left" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="12">
                        <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" Height="12" Stroke="{TemplateBinding BorderBrush}" Width="12" />
                        <Border x:Name="OuterHighlight" BorderBrush="{StaticResource ControlOuterHighlightBrush}" BorderThickness="0,0,1,1" CornerRadius="1,0,1,0" Margin="1,1,-1,-1" />
                        <Border x:Name="InnerShadow" BorderBrush="{StaticResource CheckBoxInnerShadowBrush}" BorderThickness="1,1,0,0" CornerRadius="0.5" Margin="1,1,0,0" />
                        <Border x:Name="MouseOverBorder" BorderBrush="{StaticResource ColorAccentBrush}" BorderThickness="1" Margin="1" Visibility="Collapsed" />
                        <Border x:Name="PressedBorder" BorderBrush="{StaticResource ColorAccentSubduedBrush}" BorderThickness="1" Margin="1" Visibility="Collapsed" />
                        <Path x:Name="CheckIcon" Data="M0.5625,5.0625 L1.5,3.9375 L2.9575791,4.9549685 C2.9575791,4.9549685 5.75,1.125 5.75,1.125 C5.75,1.125 6.9375,2 6.9375,2 C6.9375,2 3.186887,7.0000076 3.186887,7.0000076 z" Fill="{StaticResource CheckBoxColorAccentHighlightBrush}" FlowDirection="LeftToRight" Margin="2,2,0,1" Opacity="0"/>
                        <Rectangle x:Name="IndeterminateIcon" Fill="{StaticResource ColorAccentHighlightBrush}" Height="2" Opacity="0" Width="6" />
                        <Rectangle x:Name="DisabledVisualElement" Fill="{StaticResource DisabledBrush}" Height="12" Opacity="0" Width="12" />
                        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Margin="2" Opacity="0" Stroke="{StaticResource FocusVisualBrush}" StrokeThickness="{StaticResource FocusVisualStrokeThickness}" />
                        <Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ErrorBrush}" BorderThickness="1" Margin="1" ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
                                    <ToolTip.Triggers>
                                        <EventTrigger RoutedEvent="Canvas.Loaded">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <System:Boolean>true</System:Boolean>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </ToolTip.Triggers>
                                </ToolTip>
                            </ToolTipService.ToolTip>
                            <Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
                                <Path Data="M 1,0 L5,0 A 2,2 90 0 1 7,2 L7,6 z" Fill="{StaticResource ErrorBrush}" Margin="0,3,0,0" />
                            </Grid>
                        </Border>
                    </Grid>
                    <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

谢谢!

1 个答案:

答案 0 :(得分:1)

你走在正确的轨道上。创建具有所需背景颜色和不透明度0的矩形(或边框)。在“已检查”状态下,将“不透明度”设置为1.或者,将“可见性”设置为“折叠”和“动画”可见性,类似于在“按下”状态下为PressedBorder元素设置动画的方式。

在PressedBorder下

<Border x:Name="CheckedBorder" BorderThickness="1" Margin="1" Background="Green" Visibility="Collapsed" />

在VSM中:

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedBorder">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>