将 xaml 对象高度设置为其他 xaml 对象的百分比

Question

在我的 UWP 应用程序的 DataTemplate 中，我想将矩形的高度设置为图像高度的百分比。

我的代码是这样的。

 <DataTemplate
        x:Key="FlipViewTemplate">
        <Grid>

                <Image
                    x:Name="image"
                    Margin="20"
                    Source="{Binding fullImgUrl}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" />
                <Rectangle
                    Height="{Binding 
                   Converter={StaticResource PercentageConverter}, 
                   ElementName=image, 
                   Path=ActualHeight, 
                   ConverterParameter=0.2}"
                    Fill="#FFEA1E1E"
                    VerticalAlignment="Bottom" />

        </Grid>
    </DataTemplate>

我的转换器是这样的

 public class PercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return System.Convert.ToDouble(value) *
              System.Convert.ToDouble(parameter);
    }


    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }


}

我的问题是转换器中应该是图像实际高度的值始终为 0。

Answer 1

您已经在使用网格，因此您可以简单地定义两行。在下面的示例中，Image 控件跨越两行，即整个 Grid，而 Rectangle 仅位于第二行，占整个高度的 20%。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="4*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Image Grid.RowSpan="2" .../>
    <Rectangle Grid.Row="1" .../>
</Grid>

将 xaml 对象高度设置为其他 xaml 对象的百分比

Set xaml object height as % of other xaml object

xaml

percentage

ivalueconverter

uwp