1

我想为 Windows 手机制作一个简单的棋盘游戏,上面有 5 x 5 方形瓷砖。显然我希望它有一个动态界面,其中瓷砖的宽度和高度属性是根据用户的手机分辨率设置的。就此而言,在我的XAML代码中,我使用 * 将我的页面宽度划分为 5 列(相对大小),并且在每一列中我有一个堆栈面板,我向其中添加了 5 个按钮。像这样:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="ButtonsCol0" Grid.Column="0">
            <Button Background="AliceBlue"
               MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
               MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
            </Button>
            <Button 
               MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
               MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
            </Button>
            <Button 
               MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
               MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
            </Button>
            <Button 
               MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
               MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
            </Button>
            <Button 
               MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
               MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
            </Button>
        </StackPanel>

(我StackPanel每列还有 4 个以上)

现在的问题是我希望瓷砖具有方形(相同的高度和宽度),我发现了这个问题,这就是我添加的原因:

    MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
    MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">

到我的按钮,这似乎工作,但是当我运行代码时,结果是这样的:

在此处输入图像描述

请帮忙... :)

4

2 回答 2

1

绝对使用网格。这将为您提供一个填充父容器的统一网格。您可以根据需要在按钮或网格上设置边距。请注意,控件的默认 Horizo​​ntalAlignment 和 VerticalAlignment 是“Stretch”,因此您无需在按钮上设置任何尺寸!

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Button Grid.Row="0" Grid.Column="0" />
    <Button Grid.Row="0" Grid.Column="1" />
    ... etc
</Grid>

如果您想像另一张海报所说的那样抓住按钮,您可以将它们添加到数组中,而不是在 XAML 中定义它们 - 或者您可以循环遍历网格子项,因为它们将按指定的顺序声明(确保您按从左/右/上/下的正确顺序指定它们),您可以将在 XAML 中创建的按钮添加到数组中。您的电话(我不喜欢在代码中创建控件 - 我认为您应该在 XAML 中尽可能声明)

于 2013-11-15T11:34:09.147 回答
1

你可以做一些不同的事情,像这样(只是一个想法):

制作一个包含您的按钮的网格。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <!-- If you add the buttons in the Grid's cells, -->
    <!-- they should expand to the available width and height -->

    <Button Grid.Row="0" Grid.Column="0"
        MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
        MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>
    <Button Grid.Row="0" Grid.Column="1"
        MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
        MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"/>

     .... 23 more buttons
</Grid>

另外,(我从未使用过),看看这些(反向)绑定:

MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"

这意味着 MinWidth 和 MinHeight 仍然不匹配 - 尝试使用相同的值:将初始值存储ActualWidth到属性,然后将该属性绑定到两者MinWidthMinHeight

MinWidth="{Binding FixedSize, RelativeSource={RelativeSource Self}}" 
MinHeight="{Binding FixedSize, RelativeSource={RelativeSource Self}}"

FixedSize包含初始值的属性在哪里ActualWidth

这应该没问题,但是一旦你改变方向,我想一切都会搞砸的。这取决于您是否希望您的应用程序具有锁定方向,或者应该适应。如果它应该适应,绑定也应该改变。

但我想这仍然很麻烦......你最好有一个矩阵(按钮的二维数组)并将它们添加到视图中 - 因为这样你就可以通过简单地从数组而不是访问它们来更轻松地管理它们像 :ButtonCol0Row0等访问它们ButtonCol0Row1...

于 2013-11-15T10:49:04.887 回答