元素自动高度

Question

我有这样的元素：

的Xaml：

<UserControl
x:Class="App1.CustomControls.ApplicationTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid x:Name="Grid">
    <Grid.Background>
        <SolidColorBrush Color="#FF0353AE" Opacity="0.8"/>
    </Grid.Background>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border BorderThickness="0,3,0,0" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">
        <Border.BorderBrush>
            <SolidColorBrush Color="#FF023B7B" Opacity="0.8"/>
        </Border.BorderBrush>
        <Image Margin="14,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="../Assets/icn-download@2x.png"/>
    </Border>
    <Border BorderThickness="3,3,3,0" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch">
        <Border.BorderBrush>
            <SolidColorBrush Color="#FF023B7B" Opacity="0.8"/>
        </Border.BorderBrush>
    </Border>
    <Border BorderThickness="0,3,0,0" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2" VerticalAlignment="Stretch">
        <Border.BorderBrush>
            <SolidColorBrush Color="#FF023B7B" Opacity="0.8"/>
        </Border.BorderBrush>
        <Image Margin="14,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="../Assets/btn-training@2x.png"/>
    </Border>
</Grid>
</UserControl>

在我的表格上我有一个堆栈面板：

<StackPanel x:Name="TestStack"/>

我的元素延伸到水平，但我也希望它也能自动垂直拉伸，例如：

元素为200x200 px，因此如果堆栈面板的宽度为1000px，则元素大小调整为1000x1000px

如何实现这一目标？

我可以这样做：

CustomElement CE = new CustomElement();
CE.Heigth = TestStack.Width; //But width isn't set, because it is HorizontalAligment=Stretch

Answer 1

我解决了这个问题，将SizeChanged事件添加到我的UserControl

<UserControl x:Class="MyUserControl"
 SizeChanged="UserControl_SizeChanged">
<!-- ... -->

并在更改宽度时设置高度。

private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (Math.Abs(e.NewSize.Width - e.PreviousSize.Width) > 0)
        Height = e.NewSize.Width;
}