Переключить сетку, нажав кнопку

Question

Я пытаюсь свернуть Grid, нажав на Button. Это как моя Button представлена ​​в XAML:

<Button Grid.Column="1" Grid.RowSpan="3" Width="25" Content="&lt;&lt;" Click="OnClicked" x:Name="btnCollapse"></Button> 

Я хочу свернуть Grid щелкать эту Button (что-то вроде пристыкован окна) и вернуть Grid щелкать на Button снова. Это, как я могу это сделать в коде позади:

private bool clicked; 
private void OnClicked(object sender, RoutedEventArgs e) 
{ 
    clicked    = !clicked; 
    //leftPane is my grid 
    leftPane.Visibility = clicked ? Visibility.Collapsed:Visibility.Visible; 
    btnCollapse.Content = clicked ? ">>" : "<<"; 
} 

Это прекрасно работает, мой вопрос, как я могу представить эту логику чисто в XAML, а не в коде позади?

Моя раскладка:

<Grid> 
<Grid/> 
<GridSplitter/> 
</Grid> 
<Button/> 

Answer 1

Вы должны связать свойство с Visibility зависимостей вашего Grid к логическому свойства в DataContext (который должен реализовать INotifyPropertyChanged) и использовать BooleanToVisibilityConverter:

private bool _isGridVisible; 
public bool IsGridVisible 
{ 
    get { return _isGridVisible; } 
    set 
    { 
     if (_isGridVisible != value) 
      return; 
     _isGridVisible = value; 
     OnPropertyChanged("IsGridVisible"); // This can sometimes be named RaisePropertyChanged 
    } 
} 

private void OnClick(object sender, RoutedEventArgs e) 
{ 
    IsGridVisible = !IsGridVisible; 
} 

В XAML:

<Grid Visibility="{Binding IsGridVisible, Converter={StaticResource BooleanToVisibilityConverter}"> 
    <!-- stuff --> 
</Grid> 

Как установить содержание кнопки:

IValueConverter:

public class MyBooleanToStringConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     return (bool)value ? ">>" : "<<"; 
    } 

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

<Button Click="OnClick" Content="{Binding IsGridVisible, Converter={StaticResource MyBooleanToStringConverter}}"/> 

Стиль:

<Button Click="OnClick"> 
    <Button.Style> 
     <Style TargetType="{x:Type Button}"> 
      <Setter Property="Content" Value="<<"/> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding IsGridVisible}" Value="False"> 
      <Setter Property="Content" Value=">>"/> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Button.Style> 
</Button>