Question

我知道如何在winforms中执行此操作，但它在wpf中看起来并不容易。当在wpf中使用分割器时，如何切换方向（垂直/水平）？我试图创建一个简单的例子，只需一个按钮切换切换。

在winforms中我会在切换按钮

中输入这样的内容

private void button1_Click(object sender, EventArgs e)
        {
            splitContainer1.Orientation = splitContainer1.Orientation == Orientation.Vertical ? Orientation.Horizontal : Orientation.Vertical; 
        }

在wpf中，我得到了这个，因为分离器没有定向属性......？

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>

Answer 1

编辑2 /编辑3

我对此解决方案并不满意，因为您有效地定义了两个视图，而不是重复使用一个定义而只是更改属性，但它可能有助于您理解可能的解决方案。

我更新了XAML以显示内容区域如何与网格布局分离以及如何通过ContentPresenters传播值

在XAML中，将所需的视图定义为资源，并使用ContentControl选择模板：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication2"
        Title="MainWindow" Height="350" Width="525"
        Loaded="Window_Loaded">
    <Window.Resources>
        <DataTemplate x:Key="content1">
            <Label Content="{Binding}" Background="Yellow"/>
        </DataTemplate>
        <DataTemplate x:Key="content2">
            <Label Content="Content Part 2"/>
        </DataTemplate>
        <ControlTemplate x:Key="gridHorizontal">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Grid.Row="0" Grid.Column="0" Content="{Binding}" ContentTemplate="{StaticResource content1}"/>
                <ContentPresenter Grid.Row="0" Grid.Column="2" ContentTemplate="{StaticResource content2}"/>
                <GridSplitter Grid.Row="0" Grid.Column="1" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="gridVertical">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="5"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ContentPresenter Grid.Row="0" Grid.Column="0" Content="{Binding}" />
                <ContentPresenter Grid.Row="2" Grid.Column="0" ContentTemplate="{StaticResource content2}"/>
                <GridSplitter Grid.Row="1" Grid.Column="0" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <DockPanel>
        <Button DockPanel.Dock="Bottom" HorizontalAlignment="Left" Content="Transform" Click="Button_Click"/>
        <ContentControl x:Name="contentControl1" DataContext="Hello World" Template="{StaticResource ResourceKey=gridVertical}"/>
    </DockPanel>
</Window>

在Code Behind中，点击按钮更改模板：

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (contentControl1.Template == Resources["gridVertical"])
            contentControl1.Template = (ControlTemplate)Resources["gridHorizontal"];
        else
            contentControl1.Template = (ControlTemplate)Resources["gridVertical"];
    }

修改

查看ResizeDirection属性。

<强>原始

我没有明确的消息来源，但我的实验表明，分离器总是在其长边的方向上工作。

因此Width = 10，Height = 9 Splitter可用作上/下分离器，而Width = 9，Height = 10 Splitter可用作左/右分离器。

要播放的示例：

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="40"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="40"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="Upper Left"/> <Label Grid.Row="0" Grid.Column="2" Content="Upper Right"/> <Label Grid.Row="2" Grid.Column="0" Content="Lower Left"/> <Label Grid.Row="2" Grid.Column="2" Content="Lower Right"/> <GridSplitter Grid.Row="1" Grid.Column="0" Background="Yellow" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> <GridSplitter Grid.Row="0" Grid.Column="1" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </Grid>

开始时，红色分光器是无用的，因为它试图提供它无法实现的功能，但是只要将黄色分光器向下拉一点，红色分光器就会转换为左/右分光器。

希望有所帮助。

Answer 2

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="GridSplitterHorizontalSample" Height="300" Width="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="5" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
    <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Vertical" />
    <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>

你可以尝试这样的事情请注意GridSplitter对象中的ResizeDirection属性

wpf拆分器切换方向

2 个答案: