如何在XAML中构建带有方形中心单元的3x3网格

时间:2015-02-20 18:09:19

标签: wpf xaml windows-phone

我正在尝试使用XAML(用于Windows Phone应用程序)构建3x3网格,其中中心单元格应为正方形。我尝试了以下但它不起作用:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5*" x:Name="centerColumnDefinition" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="{Binding ElementName=centerColumnDefinition, Path=ActualWidth}" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Canvas Grid.Row="1" Grid.Column="1">
        ...
    </Canvas>
</Grid>

对工作解决方案的任何建议?

来自德国的问候,

托拜厄斯

2 个答案:

答案 0 :(得分:0)

试试这个

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition x:Name="centerColumnDefinition" 
                          Width="5*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Rectangle x:Name="CenterRect"
               Grid.Row="1"
               Grid.Column="1"
               Height="{Binding ElementName=CenterRect,
                                Path=ActualWidth}"
               HorizontalAlignment="Stretch" />
</Grid>

引用列和行定义可能很棘手,因为它们不是可视树中的“真实”对象。此方法通过在中心单元格中使用可用于获取正确大小的单独对象来避免此问题。

如果需要,您应该可以使用其他类型的控件替换矩形,或者只是将其保留并将内容嵌入矩形内。

答案 1 :(得分:0)

在测量和排列控件之前,不会设置ActualHeight和ActualWidth。通常,InitializeComponent()中没有任何内容会导致度量,因此您需要在计算后设置行的高度。您可以在Loaded事件上重新调整大小。

来源:https://stackoverflow.com/a/1695518/546896