How to Show Image in CustomMessageBox

Question

I have the need to display an image as the content of a CustomMessageBox. I have attempted to set this up as follows, yet no images is displayed, but everything else looks ok.

Image image = new Image();
BitmapImage bmp = new BitmapImage(new Uri("/Assets/image.png", UriKind.Relative));
image.Source = bmp as ImageSource;

CustomMessageBox messageBox = new CustomMessageBox()
{
    Caption = "\n" + "Caption",
    Message = "\n" + "Message. + "\n",
    LeftButtonContent = "left button",
    Content = image
};

messageBox.Dismissed += (s1, e1) =>
{
    switch (e1.Result)
    {
        case CustomMessageBoxResult.LeftButton:
            MessageBox.Show("left button");
            break;
        case CustomMessageBoxResult.None:
            MessageBox.Show("none");
            break;
        default:
            MessageBox.Show("default");
            break;
    }
};

messageBox.Show();

score 1 · Accepted Answer · answered Jul 25 '14 at 05:26

You can add a custom UI as the content of the custom message box. I have done it. Here is the code from one of my projects. It has An image and a textBox in side a StackPanel. Here is the method to create the UI.

private StackPanel CreateUI(string imagePath, string username)
{
    StackPanel userStack = new StackPanel()
    {
        Orientation = System.Windows.Controls.Orientation.Horizontal,
        HorizontalAlignment = System.Windows.HorizontalAlignment.Left,
        Margin = new Thickness(36, 24, 0, 0)
    };

    Image profilePic = new Image()
    {
        Source = new BitmapImage(new Uri(imagePath, UriKind.Absolute)),
        Name = "imgProfile",
        Height = 100,
        Width = 100,
        Margin = new Thickness(0, 0, 6, 0)
    };

    TextBlock userName = new TextBlock()
    {
        Text = username,
        Name = "txblkUserName",
        Foreground = new SolidColorBrush(Colors.White),
        FontSize = 32,
        Margin = new Thickness(0, 12, 0, 0)
    };


    userStack.Children.Add(profilePic);
    userStack.Children.Add(userName);
    return userStack;
}

And here is how i added it to the CustomMessageBox.

CustomMessageBox msgBox = new CustomMessageBox()
{
    Caption = "Your Caption",
    Content = this.CreateUI(profilePic, userName),
    Message = "Your Message",
    LeftButtonContent = "Left Button Content"
};
msgBox.Show();

It works perfectly. Hope this helps :)

** EDIT: If your image is inside your project, then the UriKind should change to Relative.

score 0 · Answer 2 · answered Jul 25 '14 at 05:13

0

I dont know about CustomMessageBox but i do know it uses Popup to show messagebox.

you can do that too. This should give you much more freedom.

See here http://developer.nokia.com/community/wiki/How_to_use_Pop-Ups_in_Windows_Phone

answered Jul 25 '14 at 05:13

Rishabh876

3,010
2
20
37

score 0 · Answer 3 · answered Jul 25 '14 at 08:24

in XAML

<Popup Grid.Row="1"  x:Name="popup" IsOpen="False" Margin="0, -30,0,0">

            <Grid Background="Black" Height="300" Width="480">

                <StackPanel>
                    <TextBlock Text="MsgBox with Image" FontSize="40" Foreground="White" Margin="15 20"></TextBlock>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="This is an image -> " FontSize="22" Foreground="White" Margin="15 0 0 20"></TextBlock>
                        <Image Source="imagepath" Height="45" VerticalAlignment="Top" Margin="0 -10"/>
                        <TextBlock Text=" in a msgbox " FontSize="22" Foreground="White" Margin="15 0 0 20"></TextBlock>
                    </StackPanel>

                    <Button Content="ok" Width="220" Margin="5 40 20 0" HorizontalAlignment="Left" Click="OKButton_Click"/>
                </StackPanel>

            </Grid>

        </Popup>

in your code behind:

this.popup.IsOpen = true; //opens our custom msgbox

            if (this.popup.IsOpen == true)
            {
                scrollviewerCustom.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; //disables the scrollviewer
                this.ApplicationBar.Disable(); //disables the application bar
            }



//on click of OK button
private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.popup.IsOpen = false; //closes our msgbox
            scrollviewerCustom.VerticalScrollBarVisibility = ScrollBarVisibility.Visible; //enables the scrollviewer
            this.ApplicationBar.Enable(); //enables the application bar
        }

How to Show Image in CustomMessageBox

3 Answers3