带边框的窗口按比例调整大小

Question

我有一个带有 tabControl 的窗口，其中有 2 个边框。 在第一个边框中，我有一个带有一些按钮的列表框。 一切都很好，但我必须添加用户通过最大化或手动拖动来调整大小的功能。 所以第一个边框总是占窗口的 33%，第二个占 66%。

所以这是未调整大小的窗口，它是正确的

当变大时，您可以看到两个边框重叠，这是错误的，甚至包含按钮的列表框也不会调整大小。

这是我的 xaml

  <Grid>
    <Grid.Background>
        <ImageBrush ImageSource="/EasyRun2.0;component/Resources/Images/gradientWallpaper.jpg"/>
    </Grid.Background>
    <TextBlock Text="{Binding WelcomeMessage}" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Margin="428,128,99.6,228"/>
    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" Margin="0,0,0,20">
    </StackPanel>
    <TabControl TabStripPlacement="Left" Margin="0,0,-0.4,0" Background="{x:Null}">
        <TabItem Header="&#xF0A7;"  Height="80" FontSize="50" Background="{x:Null}" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Border1" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Margin="10,10,168.8,10.4" >
                    <ListBox x:Name="lbButtons" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" Loaded="lbButtons_Loaded"/>
                </Border>
                <Border x:Name="Border2" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Grid.ColumnSpan="2" Margin="263,10,9.2,10" />
            </Grid>
        </TabItem>
        <TabItem Header="&#xF0F7;"  Height="80"  FontSize="50">
            <TabItem.Background>
                <ImageBrush/>
            </TabItem.Background>
        </TabItem>
        <TabItem Header="&#xF013;"  Height="80" FontSize="50" Background="{x:Null}" >
            <Button x:Name="ButtonAdd" Content="+" Tag="ADD" Background="{x:Null}" Click="Button_Click"/>
        </TabItem>

    </TabControl>
</Grid>

提前致谢 帕特里克

Answer 1

只需将网格ColumnDefinitions 更改为 33% 和 66%。

然后把两个边框分别放在Grid.Column:
- Grid.Colum="1" 或默认为 0

<Grid>
    <Grid.ColumnDefinitions>
        <!--change-->
        <ColumnDefinition Width="33*" />
        <!--change-->
        <ColumnDefinition Width="66*" />
    </Grid.ColumnDefinitions>
    <Border x:Name="Border1" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Margin="10,10,10,10.4" >
        <ListBox x:Name="lbButtons" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" />
    </Border>
    <Border x:Name="Border2" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,9.2,10" />
</Grid>

感谢您发布的完整代码，我可以给它发短信，它可以工作

Answer 2

您可以尝试使用 GridSplitter。 代码如下所示：

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

        <Border x:Name="Border1" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Margin="10,10,10,10.4" >
            <ListBox x:Name="lbButtons" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" />
        </Border>

        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeDirection="Columns" Margin="2"/>

        <Border x:Name="Border2" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="2" Margin="10,10,9.2,10" />
    </Grid>