Change image source in contentdialog title template winui c#

Question

Dear everybody.

Using Microsoft Visual Studio Community 2022 (64 bits) - Current Versión 17.9.3 on Windows 10 most recent update, Packaged WinUI with C#

I am programming from scratch a new program (WinUI with C#) to manage my motorized telescope.

I have created in XAML a few contentdialogs. I can access and change the textblocks, title in them but I can't access the image source of the image I have placed in the title template. This forces me to create a contentdialog in xaml for every contetdialog with a diferent image in it (for example, error, info, question, notice, etc.).

Any way I can change this image source as I do in buttons with (for examp,le for a button: buttonImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/ImagenesBotones/ConectarPSX.png")); )?

I have tested adding a Name, x:Name to this image but no way of accessing it from my program at runtime before the await ShowAsync of this content dialog.

XAML

<ContentDialog x:Name="MensajesInfo"

CloseButtonText="ACEPTAR"

DefaultButton="None"

CornerRadius="4"

Background="{StaticResource Gris8}"

BorderBrush="{StaticResource BrushGris2}"

BorderThickness="3"

IsPrimaryButtonEnabled="False"

PrimaryButtonStyle="{StaticResource ButtonStyleACEPTAR}"

IsSecondaryButtonEnabled="False"

CloseButtonStyle="{StaticResource ButtonStyleACEPTAR}"

Opened="Mensajes_opened">

<ContentDialog.TitleTemplate>

<DataTemplate>

<StackPanel Orientation="Vertical">

<StackPanel Orientation="Horizontal">

<Image Source="Assets/ImagenesBotones/Info.png" Width="35" Height="35" Margin="0,0,10,10"/> <!-- left, top, right, bottom-->

<TextBlock Text="{Binding}"/>

</StackPanel>

<Line Stroke="{StaticResource BrushGris2}" X1="0" X2="300" StrokeThickness="1" HorizontalAlignment="Center"/>

</StackPanel>

</DataTemplate>

</ContentDialog.TitleTemplate>

<StackPanel Orientation="Vertical">

<TextBlock x:Name="TextoMensajeInfo" TextWrapping="WrapWholeWords" TextAlignment="Center" LineStackingStrategy="BlockLineHeight" FontSize="18" LineHeight="19"/>

</StackPanel>

</ContentDialog>

Any help appreciated.

Best Regards

Paul Harvey Chiverton

Answer 1

Hello,

Welcome to Microsoft Q&A!

You could try to use the VisualTreeHelper to go down from the ContentDialog to the child, to find the Image control, and then you could change its source.

public static T FindChild<T>(DependencyObject parent) where T : DependencyObject
{
    if (parent == null)
        return null;
 
    int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
    for (int i = 0; i < childrenCount; i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
            return typedChild;
 
        // Recursively search deeper into nested containers
        T result = FindChild<T>(child);
        if (result != null)
            return result;
    }
 
    return null; // Child not found
}
 
private void ContentDialog_Loaded(object sender, RoutedEventArgs e)
{
    ContentDialog contentDlg = sender as ContentDialog;
    Image img = FindChild<Image>(contentDlg);
 
    if (img != null)
    {    
        img.Source = new BitmapImage(new Uri("ms-appx:///……"));
    }
}

However, you couldn't change that image source before the ShowAsync. The reason is that before ShowAsync, there was no ContentDialog in the Visual Tree. Thank you.

Jeanine

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.