Window 边框按比例调整大小
Window with borders to be proportionally resized
我有一个带有 tabControl 的 window,其中有 2 个边框。
在第一个边框中,我有一个带有一些按钮的列表框。
一切都很好,但我必须添加由用户通过最大化或手动拖动调整大小的功能。
所以第一个边界总是占 window 的 33%,第二个占 66%。
所以这是 window 未调整大小并且是正确的
当变大时,您可以看到两个边框重叠,这是错误的,甚至包含按钮的列表框也不会调整大小。
这是我的 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="" 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="" Height="80" FontSize="50">
<TabItem.Background>
<ImageBrush/>
</TabItem.Background>
</TabItem>
<TabItem Header="" Height="80" FontSize="50" Background="{x:Null}" >
<Button x:Name="ButtonAdd" Content="+" Tag="ADD" Background="{x:Null}" Click="Button_Click"/>
</TabItem>
</TabControl>
</Grid>
提前致谢
帕特里克
只需将网格 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>
多亏了你发布的完整代码,我可以发短信给它并且它有效
您可以尝试使用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>
我有一个带有 tabControl 的 window,其中有 2 个边框。 在第一个边框中,我有一个带有一些按钮的列表框。 一切都很好,但我必须添加由用户通过最大化或手动拖动调整大小的功能。 所以第一个边界总是占 window 的 33%,第二个占 66%。
所以这是 window 未调整大小并且是正确的
当变大时,您可以看到两个边框重叠,这是错误的,甚至包含按钮的列表框也不会调整大小。
这是我的 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="" 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="" Height="80" FontSize="50">
<TabItem.Background>
<ImageBrush/>
</TabItem.Background>
</TabItem>
<TabItem Header="" Height="80" FontSize="50" Background="{x:Null}" >
<Button x:Name="ButtonAdd" Content="+" Tag="ADD" Background="{x:Null}" Click="Button_Click"/>
</TabItem>
</TabControl>
</Grid>
提前致谢 帕特里克
只需将网格 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>
多亏了你发布的完整代码,我可以发短信给它并且它有效
您可以尝试使用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>