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

Posted

技术标签:

【中文标题】如何使堆栈面板内的按钮展开以占用整个空间?【英文标题】:How to make buttons inside a stackpanel expand to use up the whole space? 【发布时间】:2013-05-13 12:43:11 【问题描述】:

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

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

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

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

编辑:

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

CalendarGrid 有一个

    MonthPanel(StackPanel) 具有上个月和下个月的按钮和月份名称。 DaysPanel(StackPanel) 有 7 个文本块,适用于周一、周二...周日。 现在包含所有 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>
    

【问题讨论】:

你可以尝试把按钮放在viewbox里面,viewbox默认行为是拉伸 【参考方案1】:

对于日历,我会考虑将您的 StackPanel 替换为 GridGrid 让扩展子控件变得容易。为此,创建一个 6x7 Grid 并将高度和宽度都设置为 *。这将导致它们在父容器内均匀分布空间(即使在调整大小的情况下)。当您将按钮放入每个网格单元格时,它会自动填充整个空间。

Grid's 通常在元素需要相互对齐时是可取的。如果您不关心元素是否在特定轴上排列,请使用 StackPanel

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

【讨论】:

可能还值得一提的是StackPanel 的内容即使设置为Stretch 也不会填充父容器。它试图占用最少的空间来包含控件。然而,网格可以填充父容器(在拉伸模式下) 它扩展到除了 27" 之外的所有内容!网格在一个角落。我已经更新了我的整个代码。 @alfah - 是的,您需要一些逻辑来处理当顶部和底部行未完全填满时边框的外观(例如,该月在星期二结束)。我会使用Grid 来设置您的布局,但可能会在每个单元格中嵌入一个边框,该边框仅在该单元格在该月的给定日期有效时才使用BorderThickness

以上是关于如何使堆栈面板内的按钮展开以占用整个空间?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用堆栈视图自动布局标签和按钮?

动态宽度大小以适应堆栈视图中的控件

折叠堆栈面板时从网格中删除空间

使一组按钮填满父 div 的整个宽度

动画 NSSplitview 和窗口大小

如何确保 UILabel 只占用它需要的空间,而不需要额外的填充?