如何设置 XAML 中静态资源 Image.Source 的大小?

问题描述

我的 GUI 中有以下 Image

<Image Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="5" Source="{Binding SelectedExternalCameraDevice.LiveStreamSource,FallbackValue={StaticResource LivestreamDefaultimage},TargetNullValue={StaticResource LivestreamDefaultimage}}"
           HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Uniform"/>

fallback 和 targetnullvalue 的静态资源如下(这基本上取自 Windows's Image library - 它是图标“PlayVideo”):

    <DrawingImage x:Key="LivestreamDefaultimage" >
        <DrawingImage.Drawing>
            <DrawingGroup>
                <DrawingGroup.Children>
                    <GeometryDrawing Brush="{ui:DynamicColor SystemControlPageTextBaseMediumBrush}" Geometry="F1M16,16L0,16 0,0 16,0z" />
                    <GeometryDrawing Brush="{ui:DynamicColor SystemControlPageBackgroundChromeLowBrush}" Geometry="F1M16,4L16,12C16,13.103,15.103,14,14L2,14C0.897,12L0,4C0,2.897,0.897,2,2L14,2C15.103,16,4" />
                    <GeometryDrawing Brush="{ui:DynamicColor SystemControlPageTextBaseMediumBrush}" Geometry="F1M6,11L6,5 10.954,8z M14,3L2,3C1.448,3,1,3.448,4L1,12C1,12.552,1.448,13,13L14,13C14.552,15,12L15,4C15,14.552,3" />
                    <GeometryDrawing Brush="{ui:DynamicColor SystemControlPageBackgroundChromeLowBrush}" Geometry="F1M6,5L10.954,8 6,11z" />
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>

一旦 viewmodel 中绑定的 ImageSource 具有合适的图像,Image 控件将均匀拉伸到可用空间,并保持其纵横比。但是,虽然源为空,但图像采用静态资源作为源,我有一些认的纵横比(看起来像 1:1)。我如何设置 LivestreamDefaultimage 的宽度/高度/纵横比,以便它也能以我选择的尺寸拉伸到可用空间?

解决方法

如果我理解正确,那么试试这个风格:

    <Image x:Name="image" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"
           Grid.RowSpan="2" Margin="5"
           HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Image.Style>
            <Style TargetType="Image">
                <Setter Property="Source" Value="{Binding SelectedExternalCameraDevice.LiveStreamSource}"/>
                <Setter Property="Stretch" Value="Uniform"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedExternalCameraDevice.LiveStreamSource}" Value="{x:Null}">
                        <Setter Property="Source" Value="{DynamicResource LivestreamDefaultImage}"/>
                        <Setter Property="Stretch" Value="Fill"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>