WPF: Content of round-cornered border not being round-cornered

Question

I have a round-cornered border and I am trying to make its contents to be also round-cornered but my attempts are not working. Basically I am doing a kind of custom MessageBox but simpler, only with one image icon, a text and a button. No title bar. Image icon is changing depending on the type of message.

Stackpanel corners overlaps over border so border corners are not showing rounded.

ATTEMPT #1:

<Border x:Name="MyCustomMessageBox"
        CornerRadius="5,5,5,5"
        Grid.ZIndex="3"
        Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"                
        Width="auto" Height="auto"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        BorderBrush="DarkBlue" BorderThickness="1"
        Background="White">
    <Border.Effect>
        <DropShadowEffect />
    </Border.Effect>
    <Grid Background="Blue">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="WhiteSmoke">
            <Grid>
                <Image VerticalAlignment="Center" HorizontalAlignment="Left" 
                   Source="/Common.MyImages;component/Images/Info.png" 
                   Height="48" Width="48" Margin="20,10">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding MsgType}" Value="1">
                                    <Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Grid>
            <TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left" 
                       Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
            </TextBlock>
        </StackPanel>
        <Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0" 
                Click="btnCustomMessageBox_Click"
                HorizontalAlignment="Center"  Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
    </Grid>
</Border>

ATTEMPT #2: As explained here, I have tried also but without success.

<Grid>
    <Grid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=MyCustomMessageBox}" />
    </Grid.OpacityMask>

    <!-- Here goes all the above border code -->

</Grid>

Answer 1

The following should solve your issue.

<Border x:Name="MyCustomMessageBox"
        CornerRadius="5"
        Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
        Width="auto" Height="auto"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        BorderBrush="DarkBlue" 
        BorderThickness="1"
        Background="blue">
    <Border.Effect>
        <DropShadowEffect />
    </Border.Effect>
    <Grid> <!-- removed the Background here. Only letting borders provide background. -->
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- 
              Added a border to fill the top part of the grid with the 
              whitesmoke color using a borderradius on the top. 
              Also note that the Background from the stackpanel was removed.
        -->
        <Border
            Grid.Row="0" Grid.Column="0" 
            Name="mask"
            Background="WhiteSmoke"
            CornerRadius="5,5,0,0"
        />
        <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
            <Grid>
                <Image VerticalAlignment="Center" HorizontalAlignment="Left" 
                       Source="/Common.MyImages;component/Images/Info.png" 
                       Height="48" Width="48" Margin="20,10">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding MsgType}" Value="1">
                                    <Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Grid>
            <TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left" 
                       Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
            </TextBlock>
        </StackPanel>
        <Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0" 
                Click="btnCustomMessageBox_Click"
                HorizontalAlignment="Center"  Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
    </Grid>
</Border>