Обработчики кнопок в XAML - PullRequest
Новая
       5

Обработчики кнопок в XAML

1 голос
/ 28 марта 2012

У меня есть простая задача макета WPF, и я стараюсь избегать кода, если это возможно.

У меня есть две панели слева и справа. Когда я рушусь на левой панели - правая панель растягивается ... это мой xaml: 

        <Grid Name="gridContainer">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <StackPanel Background="Aqua" Grid.Column="0" Name="leftPanel" >
                <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>
            </StackPanel>

            <GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/>

            <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>
                <Button Click="LeftButton_Click" Margin="10">Close Left Panel</Button>                    
            </StackPanel>
        </Grid>

Это код-позади: 

    private void LeftButton_Click(object sender, RoutedEventArgs e)
    {
        if(leftPanel.Visibility == System.Windows.Visibility.Visible)
        {
            gridContainer.ColumnDefinitions[0].Width = GridLength.Auto;
            leftPanel.Visibility = System.Windows.Visibility.Collapsed;
            leftSplitter.Visibility = System.Windows.Visibility.Collapsed;
        }
        else
        {
            gridContainer.ColumnDefinitions[0].Width = GridLength.Auto;
            leftPanel.Visibility = System.Windows.Visibility.Visible;
            leftSplitter.Visibility = System.Windows.Visibility.Visible;
        }
    }

Мне интересно, есть ли способ избежать кода здесь? и выполнить эту задачу только в XAML?

Спасибо за совет

Ответы [ 2 ]

2 голосов
/ 28 марта 2012

Вы можете устранить свой код, используя Commanding и шаблон MVVM. В вашей модели представления могут быть свойства Visibility, которые будут привязывать данные к вашим элементам XAML.

Затем с помощью команды вы можете перенаправить событие click на команду в вашей модели представления. Вот краткий пост о твердых шаблонах командования в WPF. Каков принятый шаблон для команд WPF в MVVM?

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

1 голос
/ 28 марта 2012

Вы можете сделать это без кода.

Сначала нам нужно установить особый стиль, который позволит нам переключать visibility для StackPanel. 

<Window.Resources>
    <Style x:Key="panelStyle" TargetType="{x:Type StackPanel}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="True">
                <Setter Property="StackPanel.Visibility" Value="Collapsed" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="False">
                <Setter Property="StackPanel.Visibility" Value="Visible" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Далее мы делаем небольшие изменения в вашем исходном коде.

Добавьте стиль и свяжите Tag StackPanel с Button. 

<StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >

Измените Button на ToggleButton и присвойте ему имя. 

<ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>

Это должно выглядеть примерно так, как вы сделали. 

<Grid Name="gridContainer">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >
        <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>

    </StackPanel>

    <GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/>

    <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>
        <ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>           
    </StackPanel>
</Grid>
...