Пользовательский элемент управления не изменяет размер при изменении размера окна

У меня есть пользовательский элемент управления с этим макетом:

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

Как видите, я не устанавливал ширину и высоту для двух границ и использовал элемент управления в строке сетки:

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

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

Но размер элемента управления не изменяется при изменении размера окна. Кстати, он фиксирует свой размер, если я помещаю его в меньшую или большую ячейку сетки, это единственный раз, когда он фиксирует свой размер.

Также я рассматривал возможность использования ViewBox в качестве родителя границ в шаблоне моего пользовательского элемента управления, но это меняет весь макет:

Нормальный:

введите здесь описание изображения

с ViewBox:

введите здесь описание изображения


c# wpf xaml responsiveness
person H. Ebr    schedule 14.01.2021    source источник
comment
Попробуйте поместить свой элемент управления в DockPanel, если вы хотите, чтобы его размер изменялся вместе с окном.   -  person Russ    schedule 14.01.2021
comment
@Russ Только что попробовал, не сработало.   -  person H. Ebr    schedule 14.01.2021

Ответы (1)


arrow_upward
2
arrow_downward

Да, судя по вашим словам и кодам, ваша картина была такой, как и ожидалось. Поскольку вы не установили ширину и высоту myCustomControl, две границы заполнили бы всю область myCustomControl. И были установлены with и высота DraggableElement, это был фиксированный размер. Когда вы использовали окно просмотра, окно просмотра думало бы, что with и height myCustomControl были DraggableElement. Таким образом, желтый займет всю площадь. Если вы хотите, чтобы ваш элемент управления не заполнял вашу область, но также сохранял пропорции, вы можете установить с и высоту PART_OuterBorder и использовать окно просмотра вокруг PART_OuterBorder. Код такой:

 <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>
person Kun Ma    schedule 14.01.2021
comment
Большое спасибо, это все. Также можно сохранить соотношение сторон 1:1, установив Stretch в ViewBox на Uniform вместо Fill. - person H. Ebr; 14.01.2021