Roland Deschain
Roland Deschain

Reputation: 2830

How to set size of Image.Source which is a static resource in XAML?

I have the following Image in my GUI:

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

The static resource for the fallback and targetnullvalue look as follows (This is basically taken from Windows's Image library - it is the icon "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,14,14L2,14C0.897,14,0,13.103,0,12L0,4C0,2.897,0.897,2,2,2L14,2C15.103,2,16,2.897,16,4" />
                    <GeometryDrawing Brush="{ui:DynamicColor SystemControlPageTextBaseMediumBrush}" Geometry="F1M6,11L6,5 10.954,8z M14,3L2,3C1.448,3,1,3.448,1,4L1,12C1,12.552,1.448,13,2,13L14,13C14.552,13,15,12.552,15,12L15,4C15,3.448,14.552,3,14,3" />
                    <GeometryDrawing Brush="{ui:DynamicColor SystemControlPageBackgroundChromeLowBrush}" Geometry="F1M6,5L10.954,8 6,11z" />
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>

As soon as the bound ImageSource in the ViewModel has a proper image, the Image control will stretch uniformly to the available space, keeping it's aspect ration. However, while the source is null the image takes the static resource as source, I have some default aspect ratio (which looks like 1:1). How can I set the width/height/aspect ration of the LivestreamDefaultImage, so that it will also stretch to the available space with my chosen dimensions?

Upvotes: 0

Views: 278

Answers (1)

EldHasp
EldHasp

Reputation: 7908

If I understand you correctly, then try this Style:

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

Upvotes: 1

Related Questions