Change image source in contentdialog title template winui c#

Paul Harvey Chiverton Messina 5 Reputation points
2024-03-19T17:38:21.8233333+00:00

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

Visual Studio
Visual Studio
A family of Microsoft suites of integrated development tools for building applications for Windows, the web and mobile devices.
4,574 questions
Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
722 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Jeanine Zhang-MSFT 9,101 Reputation points Microsoft Vendor
    2024-03-21T08:20:39.1166667+00:00

    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.

    1 person found this answer helpful.
    0 comments No comments