如何更改UWP应用程序不同页面的列宽

Question

我有一个应用程序，它有一个Appshell。在这里，我在页面中定义了一个分区，如

<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
</Grid>
</UserControl>

我的应用程序中有不同的页面，每个页面都维护这个分区。然而，我确实有一个页面想要将这个分区更改为不同的编号

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
</Grid>

如果不为每个页面创建这个分区，我该如何实现这一点？分区位于AppShell.xaml中，该文件具有相应的ViewModel AppSHellViewModel。此外，每个页面都有一个视图和一个视图模型。如何从另一个xaml视图更改用户控件的列宽？

Answer 1

如果不为每个页面创建这个分区，我该如何实现这一点？

如果你不想为每个页面创建网格并设置动态分区号，你可以在代码后面生成网格，如下所示。

private Panel AddBaseLayout()
{
Grid grid = new Grid();  
ColumnDefinition col1 = new ColumnDefinition();
ColumnDefinition col2 = new ColumnDefinition();
ColumnDefinition col3 = new ColumnDefinition();
col1.Width = new GridLength(0, GridUnitType.Auto);
col2.Width = new GridLength(0, GridUnitType.Auto);
col3.Width = new GridLength(1, GridUnitType.Star);
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);
grid.ColumnDefinitions.Add(col3);
return grid;
}
RootGrid.Children.Add(AddBaseLayout());

如何从另一个xaml视图更改用户控件的列宽？

您可以为用户控件创建一个依赖属性，如下所示。

public sealed partial class CustomControl : UserControl
{
public CustomControl()
{
this.InitializeComponent();
}
public GridLength ColumnWidth
{
get { return (GridLength)GetValue(ColumnWidthProperty); }
set { SetValue(ColumnWidthProperty, value); }
}
// Using a DependencyProperty as the backing store for ColumnWidth.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ColumnWidthProperty =
DependencyProperty.Register("ColumnWidth", typeof(GridLength), typeof(CustomControl), new PropertyMetadata(0));

}

Xaml

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{x:Bind ColumnWidth, Mode=OneWay}" />
</Grid.ColumnDefinitions>
</Grid>

用法

<Grid x:Name="Test">
<local:CustomControl ColumnWidth="400"/>
</Grid>