2016-12-05 3 views
2

Я хочу сохранить статус ToggleButton после повторного включения ToggleButton. Но он продолжает отключаться.
Вот мой ToggleButton когда Эллипс Активизированный:Как сохранить статус ToggleButton после повторного включения

enter image description here

Когда ToggleLock включен:

enter image description here

После разблокировки:

enter image description here

Это неправильный цвет. Он должен превратиться в зеленый цвет.
Мой код и стиль:

<!--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> 

MainWindow:

<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(); 
    } 
} 

ответ

1

ToggleButton ли сохранить его значение IsChecked, когда оно отключено. Однако при повторном включении визуальные эффекты не совпадают: если вы отключите блокировку, вы активируете визуальную группу состояний CommonStates.Normal, которая, насколько я могу судить, сбрасывает значение по умолчанию на Ellipse с именем icon:

Fill="{TemplateBinding Background}" 

... создание красный. Вы обнаружите, что вам нужно дважды щелкнуть эллипсис, чтобы снова сделать его зеленым.

Поскольку кнопка переключения эллипсиса не изменяет ее значение IsChecked, не отображаются окна раскадровки визуальных состояний.

Я не нашел способа исправить это в 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; 
} 

Я не знаю, что это лучшее решение, но это работает, и может служить в качестве отправной точки для дальнейших исследований.

+0

спасибо за помощь .Yes, Это трудно найти путь к Исправить. В вашем решении я все еще могу отключить/переключить эллипс. @ Петтер Хессельберг. – Jandy

0

Я использую 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 будет принимать его, если не больше, ответ приходит через несколько дней.

1

Я думаю, что источником вашей проблемы является использование одного и того же элемента для двух разных VisualStateGroup. Как вы можете видеть here, существует элемент с именем «DisabledVisualElement» для обработки «Отключенного» VisualState, который отделен от элемента, который обрабатывает «CheckStates» VisualStateGroup.

После этого я добавил еще один эллипс с именем «iconDisabled» в шаблон, который имеет Opacity = «0» и его значение изменяется на «1» в «Disabled» VisualState. Кроме того, я добавил Opacity = "1" на ваш значок и он изменится на «0» в «Отключенном» VisualState.

Вот ваш модифицированный код стиль:

<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> 

Другие части кода такие же, как Вы писали в вопросе пост.

+0

благодарим за ваше решение! используя 2 формы. Я не думал об этом. Посмотрите, когда я вернусь. @ TheSETJ – Jandy

0

Я хочу сказать спасибо Петтеру Хессельбергу и 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}}"/> 
Смежные вопросы