如何在重新啓用後保持ToggleButton狀態

我想在重新啓用ToggleButton.But後保持ToggleButton狀態，它保持關閉狀態。
這裏是我的切換按鈕時，橢圓會被激活：如何在重新啓用後保持ToggleButton狀態

當ToggleLock被打開：

解鎖後：

這是錯誤的顏色。它必須轉向綠色。
我的代碼和風格：

<!--EllipseToggleButton Style--> 
<Style TargetType="ToggleButton" 
    x:Key="EllipseToggleButton"> 
    <Setter Property="Margin" 
    Value="20 10 0 10" /> 
    <Setter Property="Height" 
    Value="30" /> 
    <Setter Property="VerticalAlignment" 
    Value="Top" /> 
    <Setter Property="IsTabStop" 
    Value="False" /> 
    <Setter Property="FocusVisualStyle" 
    Value="{x:Null}" /> 
    <Setter Property="Template"> 
    <Setter.Value> 
    <ControlTemplate TargetType="{x:Type ToggleButton}"> 
    <Grid Name="contain"> 
    <VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="CommonStates"> 
    <VisualState x:Name="Normal" /> 
    <VisualState x:Name="Disabled"> 
    <Storyboard> 
    <ColorAnimation Storyboard.TargetName="icon" 
    Storyboard.TargetProperty="(Path.Fill).(Color)" 
    To="#3D727272" 
    Duration="0" /> 
    </Storyboard> 
    </VisualState> 
    </VisualStateGroup> 
    <VisualStateGroup x:Name="CheckedStates"> 
    <VisualState x:Name="Checked"> 
    <Storyboard> 
    <ColorAnimation x:Name="IconCheckedColorAni" 
    Storyboard.TargetName="icon" Duration="0" 
    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" 
    To="#FF68E80F" /> 
    </Storyboard> 
    </VisualState> 
    <VisualState x:Name="Unchecked" /> 
    </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Ellipse Name="icon" 
    Height="24" 
    Width="24" 
    Stretch="Uniform" 
    VerticalAlignment="Center" 
    Cursor="Hand" 
    Fill="{TemplateBinding Background}" /> 
    </Grid> 
    </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style>

主窗口：

<StackPanel Orientation="Horizontal"> 
    <ToggleButton x:Name="ToggleLock" 
    Content="Lock" 
    Width="100" 
    Margin="20 10 0 10" 
    VerticalAlignment="Top" 
    Height="30" /> 
    <ToggleButton Style="{StaticResource EllipseToggleButton}" 
    IsEnabled="{Binding ElementName=ToggleLock, Path=IsChecked, Converter={StaticResource InBConv}}" 
    Background="Red" /> 
</StackPanel>

轉換器：

class InvertBoolConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
    if (value != null && value is bool) 
    { 
     return !(bool)value; 
    } 
    return false; 
    } 

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

來源

2016-12-05 Jandy

的ToggleButton不保留它的IsChecked值被禁用。然而，當它被重新啓用時，視覺效果不匹配：當您取消切換鎖定時，將激活CommonStates.Normal視覺狀態組，該視覺狀態組在接近我所知的位置時重置名爲icon的Ellipse上的默認值：

Fill="{TemplateBinding Background}"

...使它變紅。你會發現你需要點擊省略號兩次才能使其再次變綠。

由於省略號切換按鈕不會更改其IsChecked值，因此不會調用CheckedStates視覺狀態故事板。

我還沒有發現任何方式在XAML來解決這個問題（試圖重新排序的觸發器，明確等等寫出所有狀態），但你可以通過強制從代碼隱藏的IsChecked狀態變化解決它：

<StackPanel Orientation="Horizontal"> 
    <ToggleButton x:Name="ToggleLock" 
     Content="Lock" 
     Width="100" 
     Margin="20 10 0 10" 
     VerticalAlignment="Top" 
     Height="30" 
     Checked="OnChecked" 
     Unchecked="OnChecked" /> 
    <ToggleButton 
     x:Name="toggleButton" 
     Style="{StaticResource EllipseToggleButton}" 
     IsEnabled="{Binding ElementName=ToggleLock, Path=IsChecked, Converter={StaticResource InBConv}}" 
     Background="Red" /> 
</StackPanel>

...用下面的事件處理程序：

private void OnChecked(object sender, RoutedEventArgs e) 
{ 
    bool? isChecked = this.toggleButton.IsChecked; 
    toggleButton.IsChecked = null; 
    toggleButton.IsChecked = isChecked; 
}

我不知道這是最好的解決方案，但它的工作，並且可以作爲一個起點，作進一步調查。

來源

2016-12-06 15:11:14

感謝您的幫助。是的，這是很難找到一個辦法在您的解決方案中，我仍然可以取消切換/切換橢圓。@ Petter Hesselberg。 – Jandy

我正在使用IsHitTestVisible而不是IsEnabled。這裏是我固定我的問題的方式：

<ToggleButton x:Name="ToggleLock" 
     IsChecked="{Binding OptionLocked}" 
     Content="Lock" 
     Width="100" 
     Margin="20 10 0 10" 
     VerticalAlignment="Top" 
     Height="30" /> 
<ToggleButton x:Name="toggleButton" 
     IsChecked="{Binding EllipseChecked}" 
     Style="{StaticResource EllipseToggleButton}" 
     IsHitTestVisible ="{Binding OptionLocked, Converter={StaticResource InvertBoolConv}}"/>

我有另一個issue.I不能設置背景色當ToggleLock被on.At至少打開它，如果沒有更多的working.I會接受它格雷回答在幾天之內。

來源

2016-12-08 03:45:46 Jandy

我認爲你的問題的來源是使用2個不同的VisualStateGroup相同的元素。正如你可以看到here有一個名爲「DisabledVisualElement」的元素來處理「Disabled」的VisualState，它與處理「CheckStates」VisualStateGroup的元素是分開的。

隨後，我添加名爲「iconDisabled」到具有不透明度=「0」並將其值變爲「1」在「禁用」的VisualState模板另一個橢圓。此外，我將不透明度=「1」添加到您的「圖標」中，並將其更改爲「Disabled」VisualState中的「0」。

下面是修改後的風格代碼：

<Style TargetType="ToggleButton" 
      x:Key="EllipseToggleButton"> 
     <Setter Property="Margin" 
       Value="20 10 0 10" /> 
     <Setter Property="Height" 
       Value="30" /> 
     <Setter Property="VerticalAlignment" 
       Value="Top" /> 
     <Setter Property="IsTabStop" 
       Value="False" /> 
     <Setter Property="FocusVisualStyle" 
       Value="{x:Null}" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Grid Name="contain"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" 
                 Storyboard.TargetName="iconDisable" 
                 Storyboard.TargetProperty="Opacity" To="1" /> 
             <DoubleAnimation Duration="0" 
                 Storyboard.TargetName="icon" 
                 Storyboard.TargetProperty="Opacity" To="0" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CheckedStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ColorAnimation x:Name="IconCheckedColorAni" 
                 Storyboard.TargetName="icon" Duration="0" 
                 Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" 
                 To="#FF68E80F" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked"> 
            <Storyboard> 
             <ColorAnimation x:Name="IconUncheckedColorAni" 
                 Storyboard.TargetName="icon" Duration="0" 
                 Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" 
                 To="Red" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Ellipse Name="icon" 
           Height="24" 
           Width="24" 
           Opacity="1" 
           Stretch="Uniform" 
           VerticalAlignment="Center" 
           Cursor="Hand" 
           Fill="{TemplateBinding Background}" /> 
         <Ellipse Name="iconDisable" 
           Height="24" 
           Width="24" 
           Opacity="0" 
           Stretch="Uniform" 
           VerticalAlignment="Center" 
           Cursor="Hand" 
           Fill="#3D727272" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

代碼的其他部分如你有問題後寫的一樣。

來源

2016-12-08 06:01:25 TheSETJ

感謝您的解決方案！使用2個形狀。我沒有想到它，當我回家的時候會檢查它。@ TheSETJ – Jandy

我想說，感謝Petter Hesselberg和TheSETJ。
最後我有固定it.Here是一個新的ControlTemplate：

<ControlTemplate TargetType="{x:Type ToggleButton}"> 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CommonStates"> 
     <VisualState x:Name="Normal" /> 
     <VisualState x:Name="Disabled" /> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="CheckedStates"> 
     <VisualState x:Name="Checked"> 
     <Storyboard> 
     <ColorAnimation x:Name="IconCheckedColorAni" 
      Storyboard.TargetName="icon" 
      Duration="0" 
      Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" /> 
     </Storyboard> 
     </VisualState> 
     <VisualState x:Name="Unchecked" /> 
     </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
      <Ellipse Name="icon" 
      Height="24" 
      Width="24" 
      Stretch="Uniform" 
      VerticalAlignment="Center" 
      Cursor="Hand" 
      Fill="{TemplateBinding Background}" 
      Visibility="Visible" /> 
      <Ellipse Name="iconDisable" 
      Height="24" 
      Width="24" 
      Stretch="Uniform" 
      VerticalAlignment="Center" 
      Cursor="Hand" 
      IsHitTestVisible="{TemplateBinding IsHitTestVisible}" 
      Fill="3D727272" 
      Visibility="Collapsed" /> 
    </Grid> 
    <ControlTemplate.Triggers> 
    <Trigger Property="IsHitTestVisible"> 
     <Trigger.Value> 
      <sys:Boolean>False</sys:Boolean> 
     </Trigger.Value> 
     <Setter TargetName="iconDisable" 
      Property="Visibility" 
      Value="Visible" /> 
      <Setter TargetName="icon" 
      Property="Visibility" 
      Value="Collapsed" /> 
     </Trigger> 
     <Trigger Property="IsHitTestVisible"> 
      <Trigger.Value> 
       <sys:Boolean>True</sys:Boolean> 
      </Trigger.Value> 
      <Setter TargetName="iconDisable" 
       Property="Visibility" 
       Value="Collapsed" /> 
       <Setter TargetName="icon" 
       Property="Visibility" 
       Value="Visible" /> 
     </Trigger> 
     </ControlTemplate.Triggers> 
</ControlTemplate>

而且MainWindow.xaml：

<ToggleButton x:Name="ToggleLock" 
     IsChecked="{Binding OptionLocked}" 
     Content="Lock" 
     Width="100" 
     Margin="20 10 0 10" 
     VerticalAlignment="Top" 
     Height="30" /> 
<ToggleButton x:Name="toggleButton" 
     IsChecked="{Binding EllipseChecked}" 
     Style="{StaticResource EllipseToggleButton}" 
     IsHitTestVisible ="{Binding OptionLocked, Converter={StaticResource InvertBoolConv}}"/>

來源

2016-12-14 09:25:48 Jandy

如何在重新啓用後保持ToggleButton狀態

回答

相關問題