WPF - GridSplitter无法在两个网格之间工作

时间:2017-03-31 07:27:29

标签: wpf xaml grid

我在使网格分割器正常工作方面遇到了一些问题。

我已将GridSplitter放置在两个网格之间,但问题是网格分割器连接到左网格,这是我可以随分割器移动的唯一网格。如果我将左侧网格移向右侧网格,则右侧网格将变小,但如果我将其从右侧网格移开,则其扩展速度不会超过其初始大小。

如何以这样的方式放置GridSplitter,它允许我调整右网格的宽度,然后如果以这种方式拖动则减小左网格的宽度。

我确实在一个正确网格的子网格中添加了一个SharedSizeGroup,但我不确定这是否与我的问题相关,删除它并没有解决任何问题。

我也尝试过使用GridSplitter的ResizeBehavor也没有运气。

我希望这是有道理的。

XAML:

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

            <TextBlock Grid.Column="3"></TextBlock>

            <Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
            <ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
            <Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
            <ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
        </Grid>

        <!--Below grid only shown when errors are present. Not relevant for problem -->
        <Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2"  Grid.Column="0">
            <TextBlock/>
        </Grid>

        <!-- The "Left" Grid -->
        <Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
            <WebBrowser></WebBrowser>
        </Grid>

        <GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>

        <!-- The "Right" Grid -->
        <Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">  
            <Border BorderBrush="Blue"  BorderThickness="1" MinWidth="200" Background="#4C808080" >
                <GroupBox MinWidth="200">
                    <GroupBox.HeaderTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock  Grid.Row="0" Grid.Column="1" Margin="5"/>
                            </Grid>
                        </DataTemplate>
                    </GroupBox.HeaderTemplate>
                    <Grid Grid.IsSharedSizeScope="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
                        <TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />

                        <Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
                        <TextBox  Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>

                        <ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
                                        <TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </GroupBox>
            </Border>
        </Grid>
    </Grid>
</Grid>

2 个答案:

答案 0 :(得分:1)

看看这个

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="3"></TextBlock>

        <Label Grid.Row="0"
               Grid.Column="0"
               VerticalContentAlignment="Center"
               Margin="5" />
        <ComboBox Grid.Row="0"
                  Grid.Column="1"
                  MinWidth="200px" />
        <Label Grid.Column="2"
               VerticalContentAlignment="Center"
               Margin="10 5 5 5" />
        <ComboBox Grid.Row="0"
                  Grid.Column="3"
                  IsEditable="True"
                  MinWidth="250px" />
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The "Left" Grid -->
        <Grid Grid.Column="0"
              Background="Aqua">
        </Grid>

        <GridSplitter HorizontalAlignment="Stretch"
                      ResizeDirection="Columns"
                      Width="10"
                      Grid.Column="1"
                      ResizeBehavior="PreviousAndNext" />

        <!-- The "Right" Grid -->
        <Grid Grid.Column="2"
              Panel.ZIndex="2"
              MinWidth="200"
              Background="Yellow">
            <Border BorderBrush="Blue"
                    BorderThickness="1"
                    MinWidth="200"
                    Background="#4C808080">
                <GroupBox MinWidth="200">
                    <GroupBox.HeaderTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock  Grid.Row="0"
                                            Grid.Column="1"
                                            Margin="5" />
                            </Grid>
                        </DataTemplate>
                    </GroupBox.HeaderTemplate>
                    <Grid Grid.IsSharedSizeScope="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"
                                              SharedSizeGroup="Label" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0"
                               Grid.Row="0"
                               Margin="5"
                               VerticalAlignment="Center"
                               Grid.ColumnSpan="2" />
                        <TextBox Grid.Column="1"
                                 Grid.Row="0"
                                 Margin="5,7"
                                 VerticalAlignment="Center"
                                 IsReadOnly="True" />

                        <Label Grid.Column="0"
                               Grid.Row="1"
                               Margin="5"
                               VerticalAlignment="Center"
                               Grid.ColumnSpan="2" />
                        <TextBox  Grid.Column="1"
                                  Grid.Row="1"
                                  Margin="5,7"
                                  VerticalAlignment="Center"
                                  IsReadOnly="True" />

                        <ItemsControl Grid.Row="2"
                                      Grid.Column="0"
                                      Grid.ColumnSpan="2">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"
                                                              SharedSizeGroup="Label" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0"
                                               Grid.Row="0"
                                               Margin="5"
                                               VerticalAlignment="Center" />
                                        <TextBox Grid.Column="1"
                                                 Grid.Row="0"
                                                 Margin="5"
                                                 VerticalAlignment="Center"
                                                 IsReadOnly="True" />
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </GroupBox>
            </Border>
        </Grid>
    </Grid>

    <!--Below grid only shown when errors are present. Not relevant for problem -->
    <Grid Grid.Row="2">
        <TextBlock />
    </Grid>
</Grid>

我改变了Grid&#34;逻辑&#34;一点点。据我了解你更正,你想要中间部分的GridSplitter。这就是为什么我将顶部和底部放在额外的行中以使它们远离GridSplitter.我必须从右侧HorizontalAlignment="Right"移除Grid。否则它不会改变它的大小。

为了确保GridSplitter正常运行,我删除了WebBrowser并在左右Background添加了Grid种颜色。你可以替换它。想想看看它是否像预期的那样工作会有所帮助。

/编辑添加的宽度关系

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <!-- The "Left" Grid -->

这意味着当您启动应用程序时,第一列的大小将是第三列的两倍。

答案 1 :(得分:0)

这应该是一个不错的展示柜,对于横排来说,它是完全相同的。

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="300"/> //sets the height of the first row
        <RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"
          HorizontalAlignment="Left"
          Width="400"
          Background="Green" />

    <Grid Grid.Row="0" 
          Margin="400,0,0,0" 
          Background="Red"/>

    <Grid Grid.Row="1" 
          Background="Blue"/>

    <GridSplitter Grid.Row="0"
                  VerticalAlignment="Bottom"  
                  HorizontalAlignment="Stretch" 
                  Height="2.5" 
                  Background="Black" />

</Grid>