自定义控件不会随着窗口调整大小而调整大小答案

【问题标题】：Custom control doesn't resize as window resizes自定义控件不会随着窗口调整大小而调整大小
【发布时间】：2021-01-14 23:26:39
【问题描述】：

我有一个具有这种布局的自定义控件：

<Border x:Name="PART_OuterBorder"
    CornerRadius="1000"
    BorderThickness="3"
    BorderBrush="Black">
    <Border.Background>
        <RadialGradientBrush>
            <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="#438F40"/>
                <GradientStop Offset="0.95" Color="#0D441D"/>
                <GradientStop Offset="2" Color="#106E42"/>
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    </Border.Background>

    <Border x:Name="PART_InnerBorder"
        CornerRadius="1000">
        <Border.Background>
            <RadialGradientBrush>
                <RadialGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="#333439"/>
                    <GradientStop Offset="1.5" Color="#000"/>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Border.Background>
        <userControls:DraggableElement x:Name="PART_DraggableElement"
                                Width="16" Height="16"/>
    </Border>
</Border>

如您所见，我没有为 2 个边框设置宽度和高度，而是在网格行中使用了控件：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="1.5*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <customControls:myCustomControl Grid.Row="1" HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch"/>
</Grid>

但是当我调整窗口大小时，控件不会调整大小。顺便说一句，如果我把它放在一个更小或更大的网格单元中，它会固定它的大小，这是它唯一一次固定它的大小。

我还考虑在自定义控件的模板中使用 ViewBox 作为边框的父级，但这会改变整个布局：

正常：

使用 ViewBox：

【问题讨论】：

如果您希望控件随 Window 一起调整大小，请尝试将控件放在 DockPanel 中。
@Russ 刚试过，没用。

标签： c# wpf xaml responsiveness

【解决方案1】：

是的，根据您的文字和代码，您的照片符合预期。因为你没有设置“myCustomControl”的宽度和高度，所以两个边框会填满myCustomControl的所有区域。并且设置了 DraggableElement 的 with 和 height ，它是固定大小的。当你使用 viewbox 时，viewbox 会认为 myCustomControl 的 with 和 height 是 DraggableElement 的。所以黄色会占据所有区域。如果您希望您的控件不填充您的区域，但也保持比例，您可以设置 PART_OuterBorder 的 with 和 height 并使用 PART_OuterBorder 周围的 viewbox。像这样的代码：

 <Viewbox Grid.Row="1" StretchDirection="Both" Stretch="Fill">
        <Border  Background="Red" Width="100" Height="100">
            <Border x:Name="PART_OuterBorder" 
                    CornerRadius="1000"
                    BorderThickness="3"
                    BorderBrush="Black">
                <Border.Background>
                    <RadialGradientBrush>
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Offset="0" Color="#438F40"/>
                            <GradientStop Offset="0.95" Color="#0D441D"/>
                            <GradientStop Offset="2" Color="#106E42"/>
                        </RadialGradientBrush.GradientStops>
                    </RadialGradientBrush>
                </Border.Background>

                <Border x:Name="PART_InnerBorder"
                         CornerRadius="1000">
                    <Border.Background>
                        <RadialGradientBrush>
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Offset="0" Color="#333439"/>
                                <GradientStop Offset="1.5" Color="#000"/>
                            </RadialGradientBrush.GradientStops>
                        </RadialGradientBrush>
                    </Border.Background>
                    <TextBlock Foreground="White" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center">haha</TextBlock>
                </Border>
            </Border>
        </Border>
    </Viewbox>

【讨论】：

非常感谢，就是这样。也可以通过将 ViewBox 的 Stretch 设置为 Uniform 而不是 Fill 来保持 1:1 的控制纵横比。