C# 定义方形按钮，windows phone 8

我想为windows phone制作一个简单的棋盘游戏，上面有5 x 5的方形瓷砖。显然，我希望它有一个动态界面，其中瓷砖的宽度和高度属性是根据用户的手机分辨率设置的。就这点而言，在我的

XAML

代码中，我使用*thing将页面宽度划分为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>

对我的按钮来说，这似乎有效，但当我运行代码时，结果如下：

    <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>

---

请帮忙……：）

你可以做一些不同的事情，像这样（只是一个想法）：

制作一个包含按钮的网格

<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和MinHeight仍然不匹配-请尝试使用相同的值： 将初始值

ActualWidth

存储到属性，然后将该属性绑定到

MinWidth

和

MinHeight

：

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

其中

FixedSize

是包含初始

实际宽度的属性

这应该很好，但一旦你改变方向，我想一切都会搞砸。
这取决于你是想让你的应用程序锁定方向，还是应该进行调整。如果它应该适应，绑定也应该改变

但我想还是很麻烦。。。你最好有一个矩阵（按钮的2D数组）并将它们添加到视图中，因为这样你就可以通过简单地从数组中访问它们来更容易地管理它们，而不是像这样访问它们：
ButtonCol0Row0
，
ButtonCol0Row1
等等。
一定要使用网格。这将为您提供一个填充父容器的统一网格。您可以根据需要在按钮或网格上设置边距请注意，控件的默认水平对齐和垂直对齐为“拉伸”，因此不需要在按钮上设置任何大小

<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中尽可能声明）
Stackpanels自动收缩，只使用其中的子级所需的空间量-对于全屏布局，请使用
（默认情况下网格自动填充父容器）。设置它需要更多的XAML，但它可以确保您有一个拉伸的或指定的高度/宽度布局，并且内容可以自动缩放。如果使用网格，您可以删除按钮上的任何大小设置-按钮可以在网格单元格内自动调整大小。不用麻烦设置按钮大小。。。它们将在网格单元内自动缩放-除非你需要它们做拉伸以外的事情，否则这是毫无意义的-使用每个按钮上的
Margin
属性可以很容易地使它们不同大小。@Vasile Marian Fălămaș，首先感谢你的时间，正如我对@charleh说的，此代码生成25个网格单元，这些网格单元根据屏幕分辨率动态调整大小，但不一定是方形（宽度-高度）。所以我应该对大小做点什么，上面的
MinHeight
和
MinWidth
绑定的问题是，当其中一个（纵向方向的高度）大于单元格大小时，另一个（宽度）也会离开网格…顺便说一句，我不知道为什么，但是当我编写
XAML
代码时，这些绑定似乎可以工作，它们通过设计器窗格反映出来，但是当我运行代码时，它们根本不起作用……亲爱的@charleh首先感谢您的时间，但是这段代码生成了25个网格单元，这些网格单元根据屏幕分辨率动态调整大小，但不一定是方形（宽-高）。正如你所提到的，按钮拉伸以填充单元格，因此它们的形状为矩形。只需通过检测实际尺寸并将较大尺寸裁剪为较小尺寸，将尺寸/宽度设置为1:1纵横比即可。您仍然不需要设置按钮的大小，因为网格将是方形的，因此按钮也将是方形的。我是windows phone开发和xaml的新手，如果您能告诉我具体的操作方法，我将不胜感激……）非常感谢。您可以编写一个方法，这样当视图加载（onload可能工作正常）时，它会查看网格的实际宽度和实际高度（如果您在XAML中使用
x:name=“SomeGrid”
命名网格，您可以在代码隐藏中引用它）。如果一个大于另一个，则将较大的设置为较小的值（您可能需要设置宽度而不是实际宽度），这样应该可以正常工作。如果
var max=Math.max（SomeGrid.ActualHeight，SomeGrid.ActualWidth）然后
SomeGrid.Width=SomeGrid.Height=max
<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>