WPF 라운드 코너 컨테이너를 작성하려면 어떻게 해야 합니까?

WPF 라운드 코너 컨테이너를 작성하려면 어떻게 해야 합니까?

XBAP 어플리케이션을 만들고 있습니다.한 페이지에 여러 곳의 모서리를 둥글게 만들어야 합니다.또한 WPF 둥근 모서리 컨테이너에 여러 요소를 배치하고 싶습니다.이 작업을 가장 잘 수행할 수 있는 방법에 대한 제안이나 샘플 코드를 가지고 계신 분 계십니까?의 스타일을 사용하거나 커스텀 컨트롤을 만들 때?

커스텀 컨트롤은 필요 없습니다.컨테이너를 테두리 요소에 넣습니다.

<Border BorderBrush="#FF000000" BorderThickness="1" CornerRadius="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>

제가 직접 해야 돼서 다른 답변을 올려야겠다고 생각했어요.

다음은 둥근 모서리 테두리를 만들고 내부 내용을 자르는 다른 방법입니다.이것은 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();
    }
}

Kobusb의 보더 제어 솔루션의 VB.Net 코드 기반 구현.ListBox of Button 컨트롤을 채우기 위해 사용했습니다.버튼 컨트롤은 MEF 확장에서 생성됩니다.각 확장은 확장 설명에 MEF의 ExportMetaData 속성을 사용합니다.확장 기능은 VisiFire 차트 개체입니다.사용자는 버튼 목록에서 선택한 버튼을 눌러 원하는 차트를 실행합니다.

        ' 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

둥근 직각 테두리에 버튼을 넣으려면 msdn의 예를 확인해야 합니다.(텍스트가 아닌) 문제의 이미지를 검색하여 찾았습니다.부피가 큰 직사각형은 (다행히) 쉽게 제거할 수 있습니다.

(ControlTemplate를 변경했기 때문에) 버튼의 동작을 재정의해야 합니다.즉, ControlTemplate의 트리거 태그(Property="IsPressed" Value="true")를 사용하여 클릭했을 때 버튼의 동작을 정의해야 합니다.태그를 트리거합니다.이렇게 하면 잃어버린 시간을 다른 사람이 절약할 수 있기를 바랍니다:)

언급URL : https://stackoverflow.com/questions/120851/how-do-i-create-a-wpf-rounded-corner-container