كيف أقوم بإنشاء حاوية WPF Rounded Corner؟

Question

نحن نقوم بإنشاء تطبيق XBAP ونحتاج إلى زوايا مستديرة في مواقع مختلفة في صفحة واحدة ونرغب في الحصول على حاوية WPF Rounded Corner لوضع مجموعة من العناصر الأخرى بداخلها.هل لدى أي شخص بعض الاقتراحات أو نماذج التعليمات البرمجية حول أفضل السبل لتحقيق ذلك؟إما مع الأنماط على أو مع إنشاء عنصر تحكم مخصص؟

Answer 1

لا تحتاج إلى عنصر تحكم مخصص، فقط ضع الحاوية الخاصة بك في عنصر الحدود:

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

يمكنك استبدال <Grid/> مع أي من حاويات التخطيط...

Answer 2

أعلم أن هذا ليس إجابة على السؤال الأولي ...لكنك غالبًا ما تريد قص المحتوى الداخلي لحد الزاوية المستديرة الذي أنشأته للتو.

لقد توصل كريس كافاناغ إلى طريقة ممتازة للقيام بهذا فقط.

لقد حاولت عدة طرق مختلفة لهذا ...وأعتقد أن هذا واحد الصخور.

هنا هو 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>

Answer 3

كان علي أن أفعل ذلك بنفسي، لذلك اعتقدت أنني سأقوم بنشر إجابة أخرى هنا.

إليك طريقة أخرى لإنشاء حدود زاوية مستديرة وقص محتواه الداخلي.هذه هي الطريقة المباشرة باستخدام خاصية Clip.إنه أمر جيد إذا كنت تريد تجنب VisualBrush.

الاكمل :

<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();
    }
}

Answer 4

التنفيذ القائم على كود VB.Net لحل مراقبة الحدود الخاص بـ kobusb.لقد استخدمته لملء ListBox بعناصر التحكم في الأزرار.يتم إنشاء عناصر التحكم في الأزرار من ملحقات MEF.يستخدم كل ملحق سمة ExportMetaData الخاصة بـ MEF للحصول على وصف للملحق.الامتدادات هي كائنات تخطيط 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

Answer 5

إذا كنت تحاول وضع زر في حدود مستطيلة مستديرة، فيجب عليك التحقق من ذلك مثال ام اس دي ان.لقد وجدت هذا من خلال البحث في Google عن صور المشكلة (بدلاً من النص).من السهل (لحسن الحظ) إزالة المستطيل الخارجي الضخم.

لاحظ أنه سيتعين عليك إعادة تعريف سلوك الزر (بما أنك قمت بتغيير ControlTemplate).أي أنك ستحتاج إلى تحديد سلوك الزر عند النقر عليه باستخدام علامة Trigger (Property="IsPressed" Value="true") في علامة ControlTemplate.Triggers.آمل أن ينقذ هذا شخصًا آخر الوقت الذي فقدته :)