[英]Making fixed-width grid columns and rows in UWP
I am making an application and I want certain grid rows and columns to be fixed, while others resize to fit the window. 我正在制作一个应用程序,我想固定某些网格的行和列,而另一些则调整大小以适合窗口。 My problem is that I cannot do this in Universal Apps. 我的问题是我无法在Universal Apps中执行此操作。
In WPF, the solution is simple: 在WPF中,解决方案很简单:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50" /> <!-- This row is a fixed height -->
<RowDefinition Height="*" MinHeight="200" /> <!-- This row is resizeable, but has a minimum height -->
<RowDefinition Height="100" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" /> <!-- This column has a fixed width -->
<ColumnDefinition Width="*" MinWidth="300" /> <!-- These rows are resizeable, but have minimum widths -->
<ColumnDefinition Width="*" MinWidth="300" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
</Grid>
When I try this in UWP, the rows and columns with fixed sizes resize while the others with asterisks stay fixed. 当我在UWP中尝试此操作时,固定大小的行和列会调整大小,而其他带有星号的行和列会保持固定。 I tried putting asterisks on the fixed rows and columns and removing the pre-existing ones. 我尝试将星号放在固定的行和列上,并删除现有的。 I thought that in UWP it was reversed, however this severely messed up my app and made it worse. 我以为在UWP中它被逆转了,但是这严重地弄乱了我的应用程序并使它变得更糟。
My solution was to try the following in UWP: 我的解决方案是在UWP中尝试以下操作:
<Grid x:Name="pageGrid"
Background="White">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="260"
MinWidth="260"/>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
</Grid.ColumnDefinitions>
</Grid>
The idea here is to have fixed margins around my controls, at 20 pixels width. 这里的想法是使控件周围具有固定的边距,宽度为20像素。 Inside these margins there are two boxes: One has a fixed width and resizable height, and the other resizes in both directions. 在这些边距内有两个框:一个框具有固定的宽度和可调整的高度,另一个框在两个方向上均具有调整大小。
Despite this, I again experienced the same problem where the margins resize but the 'resizable' boxes do not. 尽管如此,我再次遇到了相同的问题,即边距调整了大小,而“可调整大小”的框却没有。
Is there actually a way to have fixed and resizeable rows and columns in a grid using Universal Windows Platform? 实际上,是否可以使用Universal Windows Platform在网格中具有固定大小和可调整大小的行和列? So far, i have yet to find evidence of this. 到目前为止,我还没有找到证据。
Complete code: 完整的代码:
<Page
x:Class="UniversalCamera.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UniversalCamera"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
MinWidth="800"
MinHeight="450"
Width="800"
Height="450">
<Grid x:Name="pageGrid"
Background="White">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="260"
MinWidth="260"/>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="2"
BorderBrush="Black"
CornerRadius="5"
Grid.Column="1"
Grid.Row="1"
Grid.ColumnSpan="2"
Margin="-10,-10,-10,-10"/>
<Border BorderThickness="2"
BorderBrush="Black"
CornerRadius="5"
Grid.Column="1"
Grid.Row="1"
Margin="2,2,2,2">
<Image x:Name="imageFrame"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Border>
<Canvas x:Name="controlCanvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="2"
Grid.Row="1">
<StackPanel x:Name="controlStack"
Canvas.Top="0"
Canvas.Left="0"
Width="260"
Orientation="Vertical">
<Button x:Name="startLiveButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Start Live"
Click="startLiveButton_Click"/>
<Button x:Name="stopLiveButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Stop Live"
Click="stopLiveButton_Click"/>
<Button x:Name="freezeVideoButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Freeze Video"
Click="freezeVideoButton_Click"/>
<Button x:Name="loadParameterButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Load Parameter"
Click="loadParameterButton_Click"/>
<CheckBox x:Name="autoWhiteCheckbox"
HorizontalAlignment="Center"
Width="200"
Margin="0,25,0,0"
Content="Auto White Balance"
Checked="autoWhiteCheckbox_Checked"
Unchecked="autoWhiteCheckbox_Unchecked"/>
<CheckBox x:Name="autoGainCheckbox"
HorizontalAlignment="Center"
Width="200"
Margin="0,5,0,0"
Content="Auto Gain Balance"
Checked="autoGainCheckbox_Checked"
Unchecked="autoGainCheckbox_Unchecked"/>
</StackPanel>
</Canvas>
</Grid>
</Grid>
</Page>
This code is intended to have extra rows and columns as margins around the main controls. 该代码旨在在主控件周围留有多余的行和列作为空白。 These should be fixed at 20 pixels. 这些应固定为20像素。 When I run the code the margins stretch and the central boxes stay fixed; 当我运行代码时,边距会伸展,中心框保持固定; this is the opposite of what I intended: 这与我的意图相反:
(The black outlined area stays the same size when the window is resized while the margins stretch to fit the window.) (调整窗口大小时,黑色轮廓区域保持相同大小,同时页边距伸展以适合窗口。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.