c# - スタックパネル内のボタンを拡張してスペース全体を使用するにはどうすればよいですか?

Question

Windows 8 C#-xaml アプリがあります。6 つのスタックパネルを持つスタックパネルがあります。各スタックパネルには 7 つのボタンがあります。つまり、全体がカレンダーを形成する6x7のボタンです。メインスタックパネルはグリッドに配置されます。

ボタンにはコンテンツが設定されていません。コードビハインドでは、これらのボタンの日付がコンテンツとして設定されます。

私の問題は、解像度が異なると、グリッドが拡大してスタックパネルが拡大することですが、内部のボタンはコンテンツに合わせて小さくなっています。スタックパネル全体を埋めるようにボタンを展開します。メイングリッド、その中のメインスタックパネル、サブスタックパネル、およびボタンの高さと幅は [自動] に設定されます。

私はしばらくこれを達成しようとしてきました。しかし無駄に！助言がありますか？

編集：

BackButtonGrid、CalendarGrid、NotesGrid、および StatusGrid を保持するメイングリッドがあります。

CalendarGrid には

前月と翌月のボタンと月名を持つMonthPanel(StackPanel)。
月曜、火曜、日曜の 7 つのテキストブロックを持つ DaysPanel(StackPanel )。
42 個のボタンすべてを保持するようになった CalendarButton Grid。

いくつかの値を表示する 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を使用すると、子コントロールを簡単に引き伸ばすことができます。これを実現するには、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