Question

我有简单的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中完成此任务？

感谢您的建议

Answer 1

您可以使用命令和MVVM模式消除您的代码。您可以在视图模型中具有可见性属性，这些属性将是绑定到XAML元素的数据。

然后使用命令，您可以将click事件路由到视图模型中的命令。这是WPF中关于可靠命令模式的快速帖子。 What is the accepted pattern for WPF commanding in MVVM?

使用这种方法，您可以消除背后的XAML代码，并在执行命令时自行设置单元测试视图模型的行为。

Answer 2

如果没有代码隐藏，你可以这样做。

首先，我们需要设置一个特定的样式，以便我们切换visibility的{{1}}。

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>的{{1}}绑定到Tag。

StackPanel

将Button更改为<StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >并为其指定名称。

Button

它应该看起来像你完成的那样。

ToggleButton

XAML中的按钮处理程序

2 个答案: