WPF：圆角边框的内容不是圆角答案

【问题标题】：WPF: Content of round-cornered border not being round-corneredWPF：圆角边框的内容不是圆角
【发布时间】：2017-12-30 23:29:59
【问题描述】：

我有一个圆角边框，我正在尝试使其内容也是圆角的，但我的尝试没有奏效。基本上我正在做一种自定义 MessageBox 但更简单，只有一个图像图标、一个文本和一个按钮。没有标题栏。图片图标会根据消息的类型而变化。

Stackpanel 角与边框重叠，因此边框角不会显示为圆形。

尝试#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>

尝试 #2：正如here 解释的那样，我也尝试过，但没有成功。

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

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

</Grid>

【问题讨论】：

你链接的答案提供了很多解决方案，你都试过了吗？

标签： c# wpf xaml border rounded-corners

【解决方案1】：

以下应该可以解决您的问题。

<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>

【讨论】：