时间戳

首页 > 解决方案 > 自定义控件不会随着窗口调整大小而调整大小

c# - 自定义控件不会随着窗口调整大小而调整大小

问题描述

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

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

在此处输入图像描述

标签： c#wpfxamlresponsiveness

解决方案

是的，根据你的文字和代码，你的照片和预期的一样。因为你没有设置“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>

推荐阅读