[英]How to maintain the aspect ratio of Grid in this case?
I am working on silverligth 5 and under a situation where I have 3 row in a grid. 我正在研究silverligth 5,并且在网格中有3行的情况下。 frst contains some text second contains a Scrollviewer and the third one contains buttons. frst包含一些文本,第二个包含Scrollviewer,第三个包含按钮。
I want something like that when i resize the grid (suppose make it smaller) then button(on row 3) must persist but the data inside the scrollviewer (row2) can become smaller(which can be further view by scrollviewer) whereas UIelement on first row also must persist like buttons. 我想要这样的东西,当我调整网格大小(假设使其更小)时,按钮(第3行)必须保留,但是scrollviewer(row2)内部的数据可以变小(scrollviewer可以进一步查看),而UIelement首先行还必须像按钮一样持久。
Here is my try of code: 这是我的代码尝试:
<Grid x:Name="LayoutRoot" Background="{StaticResource BGBrush_1}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="EOD" FontWeight="Bold" Foreground="Orange" Margin="10" VerticalAlignment="Center" />
<ScrollViewer x:Name="panelScrollViewer" Grid.Row="1" VerticalScrollBarVisibility="Hidden" Height="600">
<telerik:RadTreeView Name="RadTreeViewObj" VerticalAlignment="Center" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<telerik:RadTreeView.ItemTemplate>
<telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">
// here are some UI elements
</telerik:HierarchicalDataTemplate>
</telerik:RadTreeView.ItemTemplate>
</telerik:RadTreeView>
</ScrollViewer>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Command="{Binding ButtonCancelCommand}" Height="23" HorizontalAlignment="Left" Margin="30,10,10,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Button Grid.Column="1" x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Command="{Binding ButtonValidateCommand}" Height="23" HorizontalAlignment="Right" Margin="10,10,30,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</Grid>
How to achieve this ? 如何实现呢?
Please see that second button is hidden behind. 请查看第二个按钮隐藏在后面。 (only half visible). (只有一半可见)。 How to solve this ? 如何解决呢?
Change your rowdefinitions to this: 将行定义更改为此:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
And remove the fixed Height
from the ScrollViewer. 然后从ScrollViewer中删除固定的Height
。
The first and last rows will be as small as possible, while the middle row will take up the remaining space. 第一行和最后一行将尽可能小,而中间行将占用剩余空间。
To avoid the Buttons overlapping, you can position them like this: 为避免按钮重叠,可以按如下所示放置它们:
<StackPanel Grid.Row="2" HorizontalAlignment="Right" Orientation="Horizontal">
<Button x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Margin="10,10,30,10" VerticalAlignment="Bottom" Width="80"/>
<Button x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Margin="30,10,10,10" VerticalAlignment="Bottom" Width="80" />
</StackPanel>
Note: This will right-align the Cancel button. 注意:这将使“取消”按钮右对齐。 (I have also placed it to the right of the Validate button) (我还将其放在“验证”按钮的右侧)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.