c# - 如何使堆栈面板内的按钮展开以占用整个空间？

Question

我有一个 Windows 8 C#- xaml 应用程序。我有一个堆栈面板，其中有 6 个堆栈面板。每个堆栈面板都有 7 个按钮。所以整个事情是形成日历的 6x7 按钮。主堆栈面板放置在网格中。

现在按钮没有设置内容。在后面的代码中，这些按钮的日期被设置为内容。

我的问题是，对于不同的分辨率，网格会扩展，因此堆栈面板会展开，但里面的按钮会更小，以适应内容。我希望按钮展开以填满整个堆栈面板。主网格、其中的主堆栈面板、子堆栈面板和按钮的高度和宽度设置为 Auto..

我一直在努力实现这一目标。但徒劳无功！有什么建议么？

编辑：

有一个主网格，其中包含 BackButtonGrid、CalendarGrid、NotesGrid 和 StatusGrid。

CalendarGrid 有一个

MonthPanel(StackPanel) 具有上个月和下个月的按钮和月份名称。
DaysPanel(StackPanel)，其中有 7 个文本块，适用于周一、周二...周日。
CalendarButton Grid 现在包含所有 42 个按钮。

2个文本框来显示一些值。

<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
    <RowDefinition Height="140"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

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

<!-- Back button and page title -->
<Grid x:Name="BackButtonGrid" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Calendar" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

<Grid x:Name="CalendarGrid" Width="Auto" Height="Auto" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch">
    <Grid.Background>
        <ImageBrush ImageSource="Assets/Images/Background/img_bg_home.jpg"/>
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="3*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="7*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <StackPanel x:Name="MonthPanel" Margin="85,54,38,453" Orientation="Horizontal">
        <Button x:Name="prevMonth" Content="&lt;" HorizontalAlignment="Left" Height="45.681" VerticalAlignment="Top" Width="53.481" Foreground="#FF121212" Tapped="PrevMonth"/>
        <TextBlock x:Name="currMonth" HorizontalAlignment="Left" Height="24" TextWrapping="Wrap" VerticalAlignment="Top" Width="126" Foreground="#FF121212" FontSize="16" TextAlignment="Center"/>
        <Button x:Name="nextMonth" Content="&gt;" HorizontalAlignment="Left" Height="45.681" VerticalAlignment="Top" Width="53.481" Foreground="#FF121212" Tapped="NextMonth"/>
    </StackPanel>
    <StackPanel x:Name="DaysPanel" Orientation="Horizontal" Grid.Row="1">
        <TextBlock x:Name="Day1" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
        <TextBlock x:Name="Day2" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
        <TextBlock x:Name="Day3" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
        <TextBlock x:Name="Day4" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
        <TextBlock x:Name="Day5" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
        <TextBlock x:Name="Day6" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
        <TextBlock x:Name="Day7" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/>
    </StackPanel>
    <Grid x:Name="CalendarButtonGrid"  Grid.Row="2" Width="Auto" Margin="0,0,-37,0" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>


            <Button x:Name="b00" Grid.Row="0" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b01" Grid.Row="0" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b02" Grid.Row="0" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b03" Grid.Row="0" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b04" Grid.Row="0" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b05" Grid.Row="0" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b06" Grid.Row="0" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/>

            <Button x:Name="b10" Grid.Row="1" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b11" Grid.Row="1" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b12" Grid.Row="1" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b13" Grid.Row="1" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b14" Grid.Row="1" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b15" Grid.Row="1" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b16" Grid.Row="1" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>

            <Button x:Name="b20" Grid.Row="2" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b21" Grid.Row="2" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b22" Grid.Row="2" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b23" Grid.Row="2" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b24" Grid.Row="2" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b25" Grid.Row="2" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b26" Grid.Row="2" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>

            <Button x:Name="b30" Grid.Row="3" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b31" Grid.Row="3" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b32" Grid.Row="3" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b33" Grid.Row="3" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b34" Grid.Row="3" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b35" Grid.Row="3" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b36" Grid.Row="3" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>

            <Button x:Name="b40" Grid.Row="4" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b41" Grid.Row="4" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b42" Grid.Row="4" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b43" Grid.Row="4" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b44" Grid.Row="4" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b45" Grid.Row="4" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b46" Grid.Row="4" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>

            <Button x:Name="b50" Grid.Row="5" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b51" Grid.Row="5" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b52" Grid.Row="5" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b53" Grid.Row="5" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b54" Grid.Row="5" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b55" Grid.Row="5" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>
            <Button x:Name="b56" Grid.Row="5" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/>

    </Grid>

    <TextBlock Grid.Row="3" x:Name="statusPreview" HorizontalAlignment="Left" Height="22" Margin="86,481,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="219">
        <Run/>
        <LineBreak/>
        <Run/>
    </TextBlock>
    <TextBlock Grid.Row="4" x:Name="notesPreview" HorizontalAlignment="Left" Height="22" Margin="86,508,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="219">
        <Run/>
        <LineBreak/>
        <Run/>
    </TextBlock>
</Grid>

<Grid x:Name="NotesGrid" HorizontalAlignment="Left" Height="553" Grid.Column="2" Grid.Row="1" VerticalAlignment="Top" Width="399">

</Grid>

<Grid x:Name"StatusGrid" HorizontalAlignment="Left" Height="553" Grid.Column="3" Grid.Row="1" VerticalAlignment="Top" Width="339">
    <Grid.Background>
        <ImageBrush ImageSource="Assets/Images/Background/img_bg_notes.jpg"/>
    </Grid.Background>

</Grid>

score 5 · Accepted Answer

对于日历，我会考虑StackPanel用Grid. Grid's 使拉伸子控件变得容易。为此，创建一个 6x7Grid并将高度和宽度设置为*. 这将导致它们在父容器内均匀分布空间（即使在调整大小的情况下）。当您将按钮放入每个网格单元格时，它将自动填充整个空间。

Grid当元素需要相互对齐时，通常建议使用。StackPanel当您不关心元素是否在特定轴上排列时使用 a 。

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Button
      Grid.Column="0"
      Grid.Row="0"
      Content="Test"
      />
</Grid>

c# - 如何使堆栈面板内的按钮展开以占用整个空间？

1 回答 1

Related

Reference