Question

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

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

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 ：正如here所解释的那样，我也尝试了但没有成功。

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

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

</Grid>

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

WPF：圆角边界的内容不是圆角的

1 个答案: