C#•3mo ago

✅ WPF - set UIElement (image) in XAML depending on databound Property Enum value

I am trying to dynamically change a StatusBar image via a view's XAML depending upon a databound ViewModel Property. The offender in question:

public StatusBarImage StatusBarImage { get => statusBarImage; set => SetProperty(ref statusBarImage, value); }

public StatusBarImage StatusBarImage { get => statusBarImage; set => SetProperty(ref statusBarImage, value); }

The enum:

internal enum StatusBarImage
{
    Warning,
    Error,
    Information,
    Success,
    Fail
}

internal enum StatusBarImage
{
    Warning,
    Error,
    Information,
    Success,
    Fail
}

Pseudocode I'm trying to achieve:

<StatusBar x:Name="MainSB" DockPanel.Dock="Bottom" Margin="4" Height="Auto">
    <StackPanel Orientation="Horizontal">
        Dear XAML, if {Binding StatusBarImage} == StatusBarImage.Warning
        <imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.StatusWarning}" />
        else if (if {Binding StatusBarImage} == StatusBarImage.Information)
        <imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.StatusWarning}" />
        <TextBlock Text="Operation Successful"></TextBlock>
    </StackPanel>
</StatusBar>

<StatusBar x:Name="MainSB" DockPanel.Dock="Bottom" Margin="4" Height="Auto">
    <StackPanel Orientation="Horizontal">
        Dear XAML, if {Binding StatusBarImage} == StatusBarImage.Warning
        <imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.StatusWarning}" />
        else if (if {Binding StatusBarImage} == StatusBarImage.Information)
        <imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.StatusWarning}" />
        <TextBlock Text="Operation Successful"></TextBlock>
    </StackPanel>
</StatusBar>

Could soemone give me a steer, please?

3 Replies

stigzler•3mo ago

Just read this example:

 <Image Tag="{Binding Gender}" Width="48" Height="48">
  <Image.Style>
    <Style TargetType="Image">
        <Style.Triggers>
            <DataTrigger  Binding="{Binding Gender}" Value="Male">
                <Setter Property="Source" Value="/Resources/Client_Male.png"/>
            </DataTrigger >
            <DataTrigger  Binding="{Binding Gender}" Value="Female">
                <Setter Property="Source" Value="/Resources/Client_Female.png"/>
            </DataTrigger >
        </Style.Triggers>
    </Style>
  </Image.Style>
 </Image>

 <Image Tag="{Binding Gender}" Width="48" Height="48">
  <Image.Style>
    <Style TargetType="Image">
        <Style.Triggers>
            <DataTrigger  Binding="{Binding Gender}" Value="Male">
                <Setter Property="Source" Value="/Resources/Client_Male.png"/>
            </DataTrigger >
            <DataTrigger  Binding="{Binding Gender}" Value="Female">
                <Setter Property="Source" Value="/Resources/Client_Female.png"/>
            </DataTrigger >
        </Style.Triggers>
    </Style>
  </Image.Style>
 </Image>

Is this the best approach or is a converter better? EDIT: Ah - you can't use CrispImage in the above, as it can't be added to the Setter Collection. 😦

canton7•3mo ago

I'd go for a converter there. A bunch of triggers like that are always a mess, and you can't re-use it You could use a CrispImage there for sure -- any DependencyProperty can be set from a style (But make sure that the Style TargetType="imaging:CrispImage", not "Image")

stigzler•3mo ago

Thanks. I did the bleow in the end, but may recosider a converter:

<imaging:CrispImage Tag="{Binding StatusImage}" Width="16" Height="16">
    <imaging:CrispImage.Style>
        <Style TargetType="imaging:CrispImage">
            <Style.Triggers>
                <DataTrigger Binding="{Binding StatusImage}" Value="Information">
                    <Setter Property="Moniker" Value="{x:Static catalog:KnownMonikers.StatusInformation}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding StatusImage}" Value="Warning">
                    <Setter Property="Moniker" Value="{x:Static catalog:KnownMonikers.StatusWarning}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding StatusImage}" Value="Success">
                    <Setter Property="Moniker" Value="{x:Static catalog:KnownMonikers.StatusOK}"/>
                </DataTrigger>

            </Style.Triggers>
        </Style>
    </imaging:CrispImage.Style>                                  
</imaging:CrispImage>

<imaging:CrispImage Tag="{Binding StatusImage}" Width="16" Height="16">
    <imaging:CrispImage.Style>
        <Style TargetType="imaging:CrispImage">
            <Style.Triggers>
                <DataTrigger Binding="{Binding StatusImage}" Value="Information">
                    <Setter Property="Moniker" Value="{x:Static catalog:KnownMonikers.StatusInformation}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding StatusImage}" Value="Warning">
                    <Setter Property="Moniker" Value="{x:Static catalog:KnownMonikers.StatusWarning}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding StatusImage}" Value="Success">
                    <Setter Property="Moniker" Value="{x:Static catalog:KnownMonikers.StatusOK}"/>
                </DataTrigger>

            </Style.Triggers>
        </Style>
    </imaging:CrispImage.Style>                                  
</imaging:CrispImage>

Gaming

Programming

✅ WPF - set UIElement (image) in XAML depending on databound Property Enum value