我如何创build一个WPF圆angular容器?

我们正在创build一个XBAP应用程序,我们需要在单个页面的不同位置有圆angular,并且我们希望有一个WPF Rounded Corner容器来放置一堆其他元素。 有没有人有一些build议或示例代码如何才能最好地完成这一点? 要么与样式上或创build自定义控件?

您不需要自定义控件,只需将您的容器放在边框元素中:

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

您可以用任何布局容器replace<Grid/>

我知道这不是对最初问题的回答,但是您经常要剪裁刚创build的圆angular边框的内容。

克里斯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> 

我只是自己做这个,所以我想我会在这里发表另一个答案。

这是另一种创build圆angular边框并剪切其内容的方法 。 这是通过使用Clip属性直接的方法。 如果你想避免一个VisualBrush是很好的。

xaml:

 <Border Width="200" Height="25" CornerRadius="11" Background="#FF919194" > <Border.Clip> <RectangleGeometry RadiusX="{Binding CornerRadius.TopLeft, RelativeSource={RelativeSource AncestorType={x:Type Border}}}" RadiusY="{Binding RadiusX, RelativeSource={RelativeSource Self}}" > <RectangleGeometry.Rect> <MultiBinding Converter="{StaticResource widthAndHeightToRectConverter}" > <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType={x:Type Border}}" /> <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType={x:Type Border}}" /> </MultiBinding> </RectangleGeometry.Rect> </RectangleGeometry> </Border.Clip> <Rectangle Width="100" Height="100" Fill="Blue" HorizontalAlignment="Left" VerticalAlignment="Center" /> </Border> 

转换器的代码:

 public class WidthAndHeightToRectConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { double width = (double)values[0]; double height = (double)values[1]; return new Rect(0, 0, width, height); } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } 

基于VB.Net的kobusb边界控制解决scheme的实现。 我用它来填充Button控件的ListBox。 button控件是从MEF扩展中创build的。 每个扩展使用MEF的ExportMetaData属性来描述扩展。 扩展名是VisiFire图表对象。 用户按下一个从button列表中select的button来执行所需的图表。

  ' Create a ListBox of Buttons, one button for each MEF charting component. For Each c As Lazy(Of ICharts, IDictionary(Of String, Object)) In ext.ChartDescriptions Dim brdr As New Border brdr.BorderBrush = Brushes.Black brdr.BorderThickness = New Thickness(2, 2, 2, 2) brdr.CornerRadius = New CornerRadius(8, 8, 8, 8) Dim btn As New Button AddHandler btn.Click, AddressOf GenericButtonClick brdr.Child = btn brdr.Background = btn.Background btn.Margin = brdr.BorderThickness btn.Width = ChartsLBx.ActualWidth - 22 btn.BorderThickness = New Thickness(0, 0, 0, 0) btn.Height = 22 btn.Content = c.Metadata("Description") btn.Tag = c btn.ToolTip = "Push button to see " & c.Metadata("Description").ToString & " chart" Dim lbi As New ListBoxItem lbi.Content = brdr ChartsLBx.Items.Add(lbi) Next Public Event Click As RoutedEventHandler Private Sub GenericButtonClick(sender As Object, e As RoutedEventArgs) Dim btn As Button = DirectCast(sender, Button) Dim c As Lazy(Of ICharts, IDictionary(Of String, Object)) = DirectCast(btn.Tag, Lazy(Of ICharts, IDictionary(Of String, Object))) Dim w As Window = DirectCast(c.Value, Window) Dim cc As ICharts = DirectCast(c.Value, ICharts) c.Value.CreateChart() w.Show() End Sub <System.ComponentModel.Composition.Export(GetType(ICharts))> _ <System.ComponentModel.Composition.ExportMetadata("Description", "Data vs. Time")> _ Public Class DataTimeChart Implements ICharts Public Sub CreateChart() Implements ICharts.CreateChart End Sub End Class Public Interface ICharts Sub CreateChart() End Interface Public Class Extensibility Public Sub New() Dim catalog As New AggregateCatalog() catalog.Catalogs.Add(New AssemblyCatalog(GetType(Extensibility).Assembly)) 'Create the CompositionContainer with the parts in the catalog ChartContainer = New CompositionContainer(catalog) Try ChartContainer.ComposeParts(Me) Catch ex As Exception Console.WriteLine(ex.ToString) End Try End Sub ' must use Lazy otherwise instantiation of Window will hold open app. Otherwise must specify Shutdown Mode of "Shutdown on Main Window". <ImportMany()> _ Public Property ChartDescriptions As IEnumerable(Of Lazy(Of ICharts, IDictionary(Of String, Object))) End Class 

如果你想把一个button放在圆angular矩形边框中,你应该检查msdn的例子 。 我发现这个问题的图像(而不是文字)的search结果。 他们庞大的外部矩形(谢天谢地)很容易删除。

请注意,您将不得不重新定义button的行为(因为您已经更改了ControlTemplate)。 也就是说,您需要在ControlTemplate.Triggers标记中使用Trigger标记(Property =“IsPressed”Value =“true”)单击时定义button的行为。 希望这节省了别人的时间,我失去了:)