WPF 使子控件寬度和高度適應父控件

Question

我有一組單選按鈕，用於 select 不同的視圖模式。 Radiobutts 有一個額外的幾何屬性，因此它們可以包含一個路徑。 我想改變的是它的調整大小行為。

如果我垂直調整 window 的大小，它們會按照我希望的方式調整大小。

但如果我水平調整 window 的大小，按鈕所在的堆棧面板將超過 window 的大小，而不是調整其子項的大小。 有人看到我在哪里搞砸了嗎？

試圖弄清楚現在很長一段時間......

這是我的 xaml：

<Grid Grid.Row="2"  Name="GrdRbs">
    <Grid>
        <Grid.Resources>
        <Style TargetType="ctrl:RadioButtonWithIcon">
            <Setter Property="Margin" Value="5,0"/>
            <Setter Property="Foreground" Value="{StaticResource stdForeGround}"/>
            <Setter Property="Background" Value="{StaticResource stdBackGround}"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ctrl:RadioButtonWithIcon">
                            <Border BorderBrush="{StaticResource stdBorder}" Background="{TemplateBinding Background}" BorderThickness="2" CornerRadius="5" MaxWidth="100" MaxHeight="80">
                                <Grid VerticalAlignment="Top" HorizontalAlignment="Left">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <ContentPresenter Margin="0,0,0,2" HorizontalAlignment="Center" Grid.Row="1" ContentSource="{TemplateBinding Content}"/>
                                <Path StrokeEndLineCap="Square" Fill="{StaticResource stdDisabled}" Stretch="Uniform" Margin="5" StrokeThickness="3" Stroke="{TemplateBinding Foreground}" Data="{TemplateBinding IconPath}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource stdMouseOver}"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="{StaticResource stdBlue}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
        <StackPanel Orientation="Horizontal" Width="{Binding ActualWidth, ElementName=GrdRbs}" HorizontalAlignment="Left" Background="Transparent" VerticalAlignment="Top" Name="stlViewModeSelection">
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Default" x:Name="rbViewDefault" IsChecked="True" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 640,0 640,1080 M 1280,0 1280,1080 M 0,360 1920,360 M 0,720 1920,720"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Split Horizontal" x:Name="rbViewSplitHorizontal" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 0,540 1920,540"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Split Vertical" x:Name="rbViewSplitVertical" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 "/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Up" x:Name="rbViewTribleUp" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,540 960,1080 M 0,540 1920,540"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Down" x:Name="rbViewTribleDown" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,540 M 0,540 1920,540"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Left" x:Name="rbViewTribleLeft" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 M 960,540 1920,540"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Right" x:Name="rbViewTribleRight" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 M 0,540 960,540"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Quad" x:Name="rbViewQuad" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 M 0,560 1920,560"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="HMode" x:Name="rbViewHMode" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 640,0 640,1080 M 1280,0 1280,1080 M 640,540 1280,540"/>
        <ctrl:RadioButtonWithIcon GroupName="View" Content="Single" x:Name="rbViewSingle" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0"/>
    </StackPanel>
    </Grid>
</Grid>

如果有人想在這里構建它，請使用 RadiobuttonWithIcon class：

class RadioButtonWithIcon : RadioButton
{   
    public Geometry IconPath
    {
        get { return (Geometry)this.GetValue(IconPathProperty); }
        set { this.SetValue(IconPathProperty, value); }
    }

    // Using a DependencyProperty as the backing store for IconPath.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IconPathProperty =
        DependencyProperty.Register(nameof(IconPath), typeof(Geometry), typeof(RadioButtonWithIcon), new PropertyMetadata(default(Geometry)));   
}

Answer 1

我通過用統一的網格替換堆棧面板來解決這個問題

<UniformGrid Rows="1" HorizontalAlignment="Left">
    <ctrl:RadioButtonWithIcon ViewMode="Default" GroupName="View" Content="Default" x:Name="rbViewDefault" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Default}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="Single" GroupName="View" Content="Single" x:Name="rbViewSingle"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Single}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="SplitHorizontal" GroupName="View" Content="Split Horizontal" x:Name="rbViewSplitHorizontal"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.SplitHorizontal}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="SplitVertical" GroupName="View" Content="Split Vertical" x:Name="rbViewSplitVertical"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.SplitVertical}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="TribleTop" GroupName="View" Content="Triple Up" x:Name="rbViewTribleUp"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleTop}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="TribleBottom" GroupName="View" Content="Triple Down" x:Name="rbViewTribleDown"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleBottom}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="TribleLeft" GroupName="View" Content="Triple Left" x:Name="rbViewTribleLeft"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleLeft}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="TribleRight" GroupName="View" Content="Triple Right" x:Name="rbViewTribleRight"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleRight}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="HMode" GroupName="View" Content="HMode" x:Name="rbViewHMode"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.HMode}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="Quad" GroupName="View" Content="Quad" x:Name="rbViewQuad"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Quad}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="Six" GroupName="View" Content="Six" x:Name="rbViewSix"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Six}}"/>
    <ctrl:RadioButtonWithIcon ViewMode="Custom" GroupName="View" Content="Custom" x:Name="rbViewCustom"  IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Custom}}"/>
</UniformGrid>

結果：