如何使堆栈面板内的按钮展开以占用整个空间?
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="<" 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=">" 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
替换为 Grid
。 Grid
让扩展子控件变得容易。为此,创建一个 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
。以上是关于如何使堆栈面板内的按钮展开以占用整个空间?的主要内容,如果未能解决你的问题,请参考以下文章