在 WPF 中使用复杂的网格拆分器

Question

我不知道如何使用网格分割器。

我让用户启用调整窗口内布局的大小。例如 XAML 我希望用户调整名为 gridDetails

的 Warp Panel 的大小

感谢您的回答

正在添加 XAML：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1" x:Name="Main" x:Class="WpfApplication1.MainWindow"

    Title="P analyzer" Height="616.15" Width="1033" WindowState="Maximized" Closing="Main_Closing">
<Window.DataContext>
    <local:DataGridViewModel/>
</Window.DataContext>
<Window.Resources>
    <Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
        <Setter Property="Margin" Value="3"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Border
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}">
                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" Value="Red"/>
                <Setter Property="BorderThickness" Value="2"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>


    <local:BackGroundConverter x:Key="converter"></local:BackGroundConverter>


</Window.Resources>





<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <!--start-->
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <!--space for putting progress bar in the middle-->
        <ColumnDefinition Width="1"/>
        <!--the end of the data grid data-->
        <ColumnDefinition Width="0.05*"/>
        <!--space betweeen datagrid data and filter-->
        <ColumnDefinition Width="3*"/>
        <!--filter-->

    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="21*"/>
        <!--Menu Bar-->
        <RowDefinition Height="4*"/>
        <!--Space-->
        <RowDefinition Height="21*"/>
        <!--progress Bar-->
        <RowDefinition Height="4*"/>
        <!--space-->
        <RowDefinition Height="413*"/>
        <!-- grid contain progress bar and datagrid data-->
        <RowDefinition Height="60*"/>
        <!-- Space-->
        <RowDefinition Height="63*"/>
        <!--grid which contain all of the translated fileds-->
    </Grid.RowDefinitions>

    <Menu  Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="0">
        <MenuItem Header="File" >
            <MenuItem Header="Load" Click="btnBrowse_Click"></MenuItem>
        </MenuItem>

        <MenuItem Header="About" ></MenuItem>
    </Menu>


    <ProgressBar x:Name="progressBarFile" Grid.Row="2" Grid.Column="1" />
    <CheckBox x:Name="CB2Lines" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="2 Lines" Checked="CB2Lines_Checked" Unchecked="CB2Lines_Unchecked" ></CheckBox>

    <Grid Grid.Row="4" Grid.Column="0"  Grid.ColumnSpan="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="85*"/>
            <ColumnDefinition Width="423*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0"  Grid.ColumnSpan="5" Background="Aqua"  >

            <ListView x:Name="LV" ItemsSource= "{Binding  Lggv}" SelectionChanged="dataGridData_SelectionChanged" ItemContainerStyle="{StaticResource ListViewItemStyle}" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel >
                            <Border BorderThickness="1" BorderBrush="Black">

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="150"></ColumnDefinition>
                                        <ColumnDefinition Width="55"></ColumnDefinition>
                                        <ColumnDefinition Width="1*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock x:Name="tbHeader" Text="{Binding Info }" AllowDrop="True"   FontWeight="Bold" Grid.Column="2" Visibility="{Binding Visibility_Header}" >

                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Background">
                                                    <Setter.Value>
                                                        <!-- this is the default background-->
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FFCEE6C6" Offset="0.008"/>
                                                            <GradientStop Color="#FF9ECF8C" Offset="0.987"/>
                                                        </LinearGradientBrush>
                                                    </Setter.Value>
                                                </Setter>                                                    
                                            </Style>
                                        </TextBlock.Style>





                                    </TextBlock>
                                </Grid>
                            </Border>
                            <Grid x:Name="GridData">                                  
                                <Grid.Background>
                                    <MultiBinding Converter="{StaticResource converter }">
                                        <Binding Path="Type"></Binding>
                                        <Binding Path="NodeID"></Binding>
                                        <Binding Path="TLV"></Binding>                                            
                                    </MultiBinding>
                                </Grid.Background>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="150"></ColumnDefinition>
                                    <ColumnDefinition Width="55"></ColumnDefinition>
                                    <ColumnDefinition Width="1*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black">
                                    <TextBlock Text="{Binding DateTime}"  ></TextBlock>
                                </Border>
                                <Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                                    <TextBlock Text="{Binding ComPort}"></TextBlock>
                                </Border>
                                <Border Grid.Column="2" BorderThickness="1" BorderBrush="Black">
                                    <TextBlock Text="{Binding Data}" ></TextBlock>
                                </Border>
                            </Grid>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>

            </ListView>

        </Grid>
    </Grid>

    <Grid  Grid.Column="5" Grid.Row="4" >

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>


        <local:ItemFilter x:Name="TypeFilter"   Grid.Column="0" Grid.Row="0" ></local:ItemFilter>
        <local:ItemFilter x:Name="NodeIDFilter" Grid.Column="1" Grid.Row="0" ></local:ItemFilter>
        <local:ItemFilter x:Name="TLVFilter" Grid.Column="2" Grid.Row="0"></local:ItemFilter>

        <!--contain filter pet type-->
    </Grid>



    <ScrollViewer Grid.Column="0" Grid.Row="5"  Grid.RowSpan="2" Grid.ColumnSpan="6">
        <WrapPanel x:Name="gridDetails" UseLayoutRounding="True"   >
        </WrapPanel>
    </ScrollViewer>

</Grid>

Answer 1

请不要只转储数百行代码，其中大部分是无关紧要的。我不打例子的话，至少把无关紧要的部分删掉吧

您需要添加一个网格行来容纳网格拆分器：

...
<Grid.RowDefinitions>
    ...
    <!-- grid contain progress bar and datagrid data-->
    <RowDefinition Height="60*"/>

    <!-- A grid space for the gridsplitter-->
    <RowDefinition Height="5"/>

    <!-- Space-->
    <RowDefinition Height="63*"/>
    <!--grid which contain all of the translated fileds-->
</Grid.RowDefinitions>
...

然后在上述行中添加一个网格分切器：

...
<GridSplitter Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

<ScrollViewer Grid.Column="0" Grid.Row="6"  Grid.RowSpan="2" Grid.ColumnSpan="6">
    <WrapPanel x:Name="gridDetails" UseLayoutRounding="True"   >
    </WrapPanel>
</ScrollViewer>

在 WPF 中使用复杂的网格拆分器

using complex grid spliter on WPF

c#

wpf

xaml

gridsplitter