Message box with Image in WP7

Hi at present I am using a grid with Image and two Buttons for showing a custom message box in my WP7 application 开发者_JS百科whose visibility is collapsed at first. All is working fine but I have to disable all the controls behind on the page when its visibility is visible. So its quite a overhead to enable/disable lots of control behind.

Is there a better solution for my requirement which are :(1) To show a message box having image and two button or textbox and (2) It should appear in the middle of page.

Thanks in advance!!

---

You can use built in Popup control with an attached behaviour written by Kent Boogaart, so it would behave like WPF Popup control with PlacementTarget and Placement:

<Popup b:PopupPlacement.PlacementTarget="{Binding ElementName=someElement}">
    <b:Popup.PreferredOrientations>
        <b:PopupOrientationCollection>
            <b:PopupOrientation Placement="Top" HorizontalAlignment="Center"/>
            <b:PopupOrientation Placement="Bottom" HorizontalAlignment="Center"/>
            <b:PopupOrientation Placement="Right" VerticalAlignment="Center"/>
            <b:PopupOrientation Placement="Right" VerticalAlignment="TopCenter"/>
        </b:PopupOrientationCollection>
    </b:Popup.PreferredOrientations>

    <Grid>
       <Grid.RowDefinitions>
         <RowDefinition />
         <RowDefinition />
       </Grid.RowDefinitions>

       <TextBlock Grid.Row="0">My popup's contents</TextBlock>
       <Image Grid.Row="1" .... />
    </Grid>
</Popup>

• See the article Silverlight Popup with Target Placement
• Download a project

---

What I do in this situation is to add a Grid or Border to the page that has a transparent background and IsHitTestVisible = True. You can then add your image etc to the parent control (Grid/Border). You need to make sure the parent control covers the whole page and then just center the dialog inside this control. When you toggle the visibility of the parent control then the transparent background will overlay the other controls on the page, effectively disabling them.

Here is an example. The uxMessageGrid is the parent control and the Border is the actual dialog. You then just need to make sure this is the last control added to the root element and toggle uxMessageGrid.Visibility in your code.

<Grid x:Name="uxLayoutRoot">

    <Other Controls />

    <Grid x:Name="uxMessageGrid"
          Visibility="Collapsed"
          Background="Transparent"
          IsHitTestVisible="True">
        <Border CornerRadius="0"
                BorderThickness="1"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                BorderBrush="{StaticResource PhoneForegroundBrush}"
                Background="{StaticResource PhoneBackgroundBrush}">
            <TextBlock Margin="15"
                       Text="Message..."
                       TextWrapping="Wrap"/>
        </Border>
    </Grid>
</Grid>

---

Use the Custom Dialog box features of the Coding4Fun toolkit http://coding4fun.codeplex.com/

The toolkit has many controls available beyond the standard Silverlight Toolkit and should more than meet your needs.

---

Try this one, may be it helps to you

        StackPanel st = new StackPanel();
        StackPanel st1 = new StackPanel();

        Image image = new Image();
        image.Height = 300;
        image.Width = 300;
        image.Source = new BitmapImage(new Uri("/PhoneApp1;component/Koala.jpg", UriKind.Relative));//Build Action=Resource

        Button btnok = new Button();
        btnok.Content = "Ok";
        btnok.Click += new RoutedEventHandler(btnok_Click);
        Button btncancel = new Button();
        btncancel.Content = "Cancel";
        btncancel.Click += new RoutedEventHandler(btncancel_Click);

        st1.Orientation = System.Windows.Controls.Orientation.Horizontal;
        st1.Children.Add(btnok);
        st1.Children.Add(btncancel);

        st.Children.Add(image);
        st.Children.Add(st1);
        ContentPanel.Children.Add(st);