Question

I’m trying to display a modal dialog with a spinning icon to indicate something happening in the background.

I’m using a Popup for the dialog and I’ve built a UserControl for the content.

The Popup displays fine, but the background is transparent. The content appears as expected. Ideally, I would like a black background with a white border on the popup.

Here is my UserControl:

<StackPanel VerticalAlignment="Center">
    <Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
    <StackPanel Name="MessPanel" Visibility="Collapsed">
        <TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
        <Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
    </StackPanel>
</StackPanel>

Answer 1

I don’t see you defining a background or a border in your xaml. If you want a background and border, you must specify one. I would also recommend doing an “overlay” instead of a popup. An overlay allows you to disable the rest of the page.

  <Grid x:Name="Overlay" Visibility="Collapsed">
        <Grid Background="{StaticResource PhoneBackgroundBrush}" Opacity=".6"/>
        <Border VerticalAlignment="Center" BorderThickness="2"
            Background="{StaticResource PhoneBackgroundBrush}" BorderBrush="{StaticResource PhoneForegroundBrush}"
            CornerRadius="5" Visibility="Visible" Margin="12">
            <StackPanel VerticalAlignment="Center">
                <Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"/>
                <StackPanel Name="MessPanel" Visibility="Collapsed">
                    <TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"/>
                    <Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"/>
                </StackPanel>
            </StackPanel>
        </Border>
    </Grid>

Show the overlay by setting it’s visibility

Overlay.Visibility = Visibility.Visible;