重新啟用RadioButton后未觸發檢查的VisualState

Question

我正在使用自定義RadioButton控件，該控件允許用戶根據所選RadioButton給出1到5之間的評分。

但是，在我的應用程序中有時會禁用5個RadioButtons ，然后重新啟用。 發生這種情況時，“已檢查” RadioButton VisualState不會激活。 而是，所有5個RadioButtons顯示為“ 正常”狀態。

為什么會這樣呢？ 我該如何解決？

這是我正在使用的RadioButtons的示例。

如果我首先選擇5個RadioButtons的第一組並進行選擇，那么一切都可能如上圖所示。

但是，如果我選擇第二組5個RadioButtons ，則控件的設計將使第一組禁用。 這工作正常，第二組正常啟用。 之后，如果我再次選擇了第一組，每一個Radiobutton會出現與正常的VisualState。 這是一個問題，因為我的程序知道在幕后＃1仍然處於Checked狀態 。 Checked VisualState未觸發，因此它看起來像這樣：

此處的目標是將Checked VisualState恢復為在第一張圖像中出現的狀態。

這是VisualStates的相應XAML代碼：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState Name="Normal"/>
        <VisualState Name="Disabled">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="FillBrush" Storyboard.TargetProperty="Color" To="#FFEEEEEE" Duration="0"/>
                <ColorAnimation Storyboard.TargetName="StrokeBrush" Storyboard.TargetProperty="Color" To="#FF777777" Duration="0"/>
                <DoubleAnimation Storyboard.TargetName="MoodEllipse" Storyboard.TargetProperty="StrokeThickness" To="1" Duration="0"/>
                <ColorAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(TextBlock.Foreground).Color" To="#FF777777" Duration="0"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="CheckStates">
        <VisualState Name="Checked">
            <Storyboard>
                <ParallelTimeline>
                    <ColorAnimation Storyboard.TargetName="FillBrush" Storyboard.TargetProperty="Color" To="#FFC5F5FF" Duration="0:0:0.05"/>
                    <ColorAnimation Storyboard.TargetName="StrokeBrush" Storyboard.TargetProperty="Color" To="#FF12394F" Duration="0:0:0.05"/>
                    <DoubleAnimation Storyboard.TargetName="MoodEllipse" Storyboard.TargetProperty="StrokeThickness" To="2" Duration="0:0:0.05"/>
                </ParallelTimeline>
            </Storyboard>
        </VisualState>
        <VisualState Name="Unchecked"/>
        <VisualState Name="Indeterminate"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

此XAML代碼似乎符合如何使用VisualStates ，但是我想它肯定有問題。

我引用了以下頁面：

• 通過創建ControlTemplate自定義現有控件的外觀
• 單選按鈕樣式和模板

作為一些其他說明，我注意到，如果我單擊Unchecked RadioButtons之一，則可以觸發Checked VisualState 。 至此，一切工作正常-直到禁用並重新啟用RadioButtons組。

另外，當我在上面的XAML代碼中未包含空的Unchecked VisualState時，我對Checked VisualState甚至遇到了更奇怪的行為。

對於為什么VisualStates表現異常的任何見解，將不勝感激。 非常感謝！

編輯：

我不確定這是否重要，但是已禁用RadioButtons組，因為它們位於StackPanels其IsEnabled屬性綁定到外部RadioButton的IsChecked屬性：

<StackPanel IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type RadioButton}}, Path=IsChecked}">

Answer 1

顯然，問題是我在兩個不同的VisualStateGroups使用了相同的目標屬性， 但是我不確定為什么會導致此問題 。

為了產生所需的效果，即在重新啟用后顯示Checked行為，我創建了另一個Ellipse ，它覆蓋了原始的Ellipse 。

原始的Ellipse是完全不透明的，並且其“ 填充/描邊”屬性僅由CheckStates組修改。

新的Ellipse最初是完全透明的（ Opacity="0" ），但是“ 禁用”狀態會導致不透明度變為完全不透明。

這個新的Ellipse淡入視圖並覆蓋了原來的Ellipse ，該Ellipse顯示了Checked / Unchecked狀態的外觀。 這將導致RadioButton的總體結果顯示為Disabled 。

這解決了OP中描述的問題，但引入了一個新問題：從“ 禁用”狀態到“已檢查”狀態的轉換是立即的。 可以通過在CommonStates組中包含此VisualTransition來解決此問題：

<VisualTransition From="Disabled" To="Checked" GeneratedDuration="0:0:0.25"/>

這是用於解決該問題的最終XAML：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualStateGroup.Transitions>
            <VisualTransition From="Disabled" To="Checked" GeneratedDuration="0:0:0.25"/>
        </VisualStateGroup.Transitions>
        <VisualState Name="Normal"/>
        <VisualState Name="Disabled">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="EllipseOverlay" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.15"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="CheckStates">
        <VisualState Name="Checked">
            <Storyboard>
                <ParallelTimeline>
                    <ColorAnimation Storyboard.TargetName="FillBrush" Storyboard.TargetProperty="Color" To="#FFC5F5FF" Duration="0:0:0.05"/>
                    <ColorAnimation Storyboard.TargetName="StrokeBrush" Storyboard.TargetProperty="Color" To="#FF12394F" Duration="0:0:0.05"/>
                    <DoubleAnimation Storyboard.TargetName="MoodEllipse" Storyboard.TargetProperty="StrokeThickness" To="2" Duration="0:0:0.05"/>
                </ParallelTimeline>
            </Storyboard>
        </VisualState>
        <VisualState Name="Unchecked"/>
        <VisualState Name="Indeterminate"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

在我的控件中，此Ellipse出現在我的原始Ellipse ，導致新的Ellipse在不透明度增加時顯示在頂部。 以下是新的Ellipse ：

<Ellipse x:Name="EllipseOverlay" StrokeThickness="1" Opacity="0" Fill="#FFEEEEEE" Stroke="#FF777777"/>

請注意，此Ellipse包含使用OP的Disabled VisualState的Fill / Stroke屬性。