Display Image in Modal Window

Question

I am trying to display am image with two methods: First is when user has full absolute path and if they don't have it and if image is stored in sqlite database as blob object. Here is my code:

var modal = new Modal();
modal.HorizontalAlignment = HorizontalAlignment.Center;
modal.VerticalAlignment = VerticalAlignment.Center;
modal.Title = "View Image";
modal.ResizeMode = ResizeMode.CanResizeWithGrip;

Grid grid = new Grid();
RowDefinition row1 = new RowDefinition() {Height = GridLength.Auto};
grid.RowDefinitions.Add(row1);

if (!string.IsNullOrEmpty(ImageFileLocation))
{
    Image i = new Image();
    BitmapImage bi = new BitmapImage();
    bi.BeginInit();
    bi.UriSource = new Uri(ImageFileLocation, UriKind.Absolute);
    bi.EndInit();
    i.Source = bi;
    //i.Height = 400;
    //i.Width = 400;
    i.MinHeight = 400;
    i.MinWidth = 400;
    i.Stretch = Stretch.Fill;
    i.HorizontalAlignment = HorizontalAlignment.Stretch;
    i.VerticalAlignment = VerticalAlignment.Stretch;
    grid.Children.Add(i);
    modal.ModalContentControl.Content = grid;
  }
  else if (ImageStore.ImageStoreId != null)
  {
      //TODO: Create Image object to display
      MessageBox.Show(ImageStore.ImageStoreId.ToString());
  }
  modal.ShowDialog();

Here is my Modal.. It is basically a window that I can re-use as a modal dialog box.

<Window x:Class="Screens.Modal"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Screens"
        mc:Ignorable="d"
        Title="Modal" ResizeMode="NoResize"
        SizeToContent="WidthAndHeight" x:Name="ModalWindow" WindowStartupLocation="CenterScreen">
    <Grid>
        <ContentControl  x:Name="ModalContentControl" />
    </Grid>
</Window>

Everything in code above works except one thing. when Modal is displayed with an image, modal comes out to be super huge and it fills almost my two monitors. I want to achieve two things with this:

1. I want modal to be resizable and so does the image inside it (responsive approach)
2. I want image to be proportionately growing since most of the image I use will be rectangle image and not square.
3. This might be easier and I probably can Google it and find out but since I am asking related question here.. How can I use the BLOB to create an Image object?

Please remove extra parameters I have with modal and/or image object if you think it is not needed to achieve what I want.

Answer 1

Avoid setting the SizeToContent property of the modal window to WidthAndHeight in your XAML markup. Keep its default value of Manual .