如何创建WPF圆角容器?

时间:2020-03-06 14:35:49  来源:igfitidea点击:

我们正在创建一个XBAP应用程序,我们需要在一个页面中的各个位置具有圆角,并且我们希望拥有一个WPF圆角容器以在其中放置许多其他元素。是否有人对我们如何最好地做到这一点有任何建议或者示例代码?使用上的样式还是创建自定义控件?

解决方案

我们不需要自定义控件,只需将容器放在border元素中:

<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
   <Grid/>
</Border>

我们可以将<< Grid />`替换为任何布局容器...

我知道这不是最初问题的答案...但是我们经常想剪切刚创建的圆角边框的内部内容。

克里斯·卡瓦纳(Chris Cavanagh)提出了一种出色的方法来做到这一点。

我已经尝试了几种不同的方法来解决这个问题……而且我认为这很困难。

这是下面的xaml:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Black"
>
    <!-- Rounded yellow border -->
    <Border
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        BorderBrush="Yellow"
        BorderThickness="3"
        CornerRadius="10"
        Padding="2"
    >
        <Grid>
            <!-- Rounded mask (stretches to fill Grid) -->
            <Border
                Name="mask"
                Background="White"
                CornerRadius="7"
            />

            <!-- Main content container -->
            <StackPanel>
                <!-- Use a VisualBrush of 'mask' as the opacity mask -->
                <StackPanel.OpacityMask>
                    <VisualBrush Visual="{Binding ElementName=mask}"/>
                </StackPanel.OpacityMask>

                <!-- Any content -->
                <Image Source="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/>
                <Rectangle
                    Height="50"
                    Fill="Red"/>
                <Rectangle
                    Height="50"
                    Fill="White"/>
                <Rectangle
                    Height="50"
                    Fill="Blue"/>
            </StackPanel>
        </Grid>
    </Border>
</Page>

如果我们尝试将按钮置于圆角矩形边框中,则应查看msdn的示例。我通过搜索问题的图像(而不是文本)发现了这一点。它们的笨重的外部矩形很容易(很高兴)被删除。

请注意,我们将必须重新定义按钮的行为(因为我们已经更改了ControlTemplate)。也就是说,我们需要使用ControlTemplate.Triggers标记中的Trigger标记(Property =" IsPressed" Value =" true")定义单击按钮时的行为。希望这可以节省我失去的时间:)