Wie erstellen Sie einen Kreis mit einem Loch in einem Kreis in WPF?

Habe ich ein UserControl erstellt, das ist ein ring, durch überlagerung von 2 Kreisen den kleinen Kreis leer und den zweiten hinter die kleinste, farbige.

In meiner WPF-Anwendung, ich möchte mehrere Ringe, aber der kleine Kreis hat blenden Sie die anderen Ringe. Ich möchte durch Sie sehen und erfassen auch die Maus-Ereignis für ring hinter anderen Ringe sonst ist es nicht real Ringe. Ist es möglich ?

Versuchte ich OpacityMask für kleine ellipse wie bereits durch die Antwort auf http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4 aber immer noch nicht zu sehen-ring hinter Loch:

<UserControl x:Class="MyUserControls.MyRing"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="150" SizeChanged="UserControl_SizeChanged">
    <Grid Height="150" Name="Grid" Width="150" MouseMove="ellipse1_MouseMove">
        <Ellipse Fill="Red" Height="150" Width="150" HorizontalAlignment="Left" Margin="0,0,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top"  >
            <Ellipse.OpacityMask>
                <RadialGradientBrush>
                    <GradientStop Color="#FFB94444" Offset="0.496"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.491"/>
                </RadialGradientBrush>
            </Ellipse.OpacityMask>
        </Ellipse>
        <Ellipse Fill="White" Height="100" Width="100" Margin="25,25,25,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" />       
    </Grid>
</UserControl>

Wie erstellen Sie einen Kreis mit einem Loch in einem Kreis in WPF?

InformationsquelleAutor user310291 | 2011-01-24
  1. 12

    Sieht es aus wie Sie schon festgestellt, dass Ihre Antwort (vor ein paar Jahren), aber für jemand anderes suchen, um dies zu tun, möchten Sie vielleicht check out CompositeGeometry:

    http://msdn.microsoft.com/en-us/library/ms751808.aspx#combindgeometriessection

    Wie:

    <Path Fill="Red" Stroke="Black">
    <Path.Data>
        <CombinedGeometry GeometryCombineMode="Xor">
            <CombinedGeometry.Geometry1>
                <EllipseGeometry RadiusX="75" RadiusY="75" Center="75,75" />
            </CombinedGeometry.Geometry1>
            <CombinedGeometry.Geometry2>
                <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
            </CombinedGeometry.Geometry2>
        </CombinedGeometry>
    </Path.Data>
</Path>

    Dann IsHitTestVisible="False" soll verhindern, dass Maus-Störungen, wenn Sie benötigt wird.

    • Tolles feature !
    • Es ist möglich, stretch-und center den Weg in seine Eltern?
    • Das ist eine schöne Antwort.
    InformationsquelleAutor Josh Stribling
  2. 9

    Sie könnte einfach erstellen Sie einen Kreis mit einem transparenten hintergrund und einem StrokeThickness im UserControl.

    <UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Ellipse Width="50" Height="50" Stroke="Blue" StrokeThickness="10" Fill="Transparent"></Ellipse>
    </Grid>
</UserControl>

    BEARBEITEN:
    Sie können einen Farbverlauf Pinsel, um den Strich wie auf der Abbildung. Sie ersetzen könnten die LinearGradientBrush mit einer anderen Art von Pinsel, wie Sie es wünschen.

    <Ellipse Width="50" Height="50" StrokeThickness="10" Fill="Transparent">
    <Ellipse.Stroke>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Green"/>
        </LinearGradientBrush>
    </Ellipse.Stroke>
</Ellipse>
    • Ich habe versucht, das problem ist, Es ist nicht mehr ein ring, da kann ich sehen, den großen Kreis hinter sich 🙂 ich möchte einen zweiten Kreis anwenden einige Gradienten, so dass große Grenze können das nicht tun, soweit ich das vorhersehen kann.
    • Wundervoll-danke 🙂
    InformationsquelleAutor Indy9000
  3. 0

    Schauen Sie sich dieses Wie erstellen Sie einen Ring mit einem transparenten center?.

    Code mit Weg und Taste es unter:

    <Grid x:Name="LayoutRoot" Width="109" Height="109">

    <Button Content="Below" Width="100" Height="100" />

    <Path Fill="#FF1F96D8" Stroke="#FF000000"
        Width="109" HorizontalAlignment="Left" Stretch="None"
        Data="M54.5,32.5 C41.245167,32.5 30.5,43.021309 30.5,56         
          30.5,68.978691 41.245167,79.5 54.5,79.5 C67.754837,79.5         
          78.5,68.978691 78.5,56 C78.5,43.021309 67.754837,32.5        
          54.5,32.5 z M54.5,0.5 C84.32338,0.5 108.5,24.676624         
          108.5,54.5 C108.5,84.32338 84.32338,108.5 54.5,108.5         
          24.676624,108.5 0.5,84.32338 0.5,54.5 0.5,24.676624         
          24.676624,0.5 54.5,0.5 z" Height="109" />


</Grid>
    • Ich habe versucht, aber scheint nicht zu funktionieren.
    • Was genau nicht funktioniert ich habe versucht mit den geposteten code (der Pfad Beispiel) mit der Taste unter ihm.
    • Ah ok ich versuche es nochmal ...
    • OK es funktioniert so gut beantworten, aber gibt es eine Möglichkeit, die Arbeit mit den Kreis nicht Weg, weil ich brauche, um Größe automatisch nicht einfach mit Weg. So versuchen die anderen solutio unten.
    InformationsquelleAutor baalazamon
Schreibe einen Kommentar