Komplexe Figur mit durchlässigen Flächen im Innern zeichnen

Palladin007 · Verfasst: Fr 22.06.12 14:32

Moin

Ich möchte in einem Programm die Möglichkeit bieten, das Farb-Layout frei zu gestalten.
Dazu wollte ich ein paar Ressourcen erstellen, die das jeweilige Element in der vorgegebenen Form darstellen.
Die Form ist etwas komplizierter, deshalb habe ich ein Polygon erstellt und sie dort gezeichnet. Allerdings musste ich dazu einige Weitere erstellen, denn innerhalb der Zeichnung sind wieder anders farbige Flächen enthalten und ich habe es nicht hin bekommen, die im selben Polygon fest zulegen.

Das ist der Code, wie ich ihn bisher habe:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

    <Grid Background="Red">
        <Polygon Points="0,5 5,5 5,0 29,0 29,5 34,5 34,29 29,29 29,34 5,34 5,29 0,29" Fill="Black" />

        <Polygon Points="9,10 9,12 11,12 11,10" Fill="White"/>
        <Polygon Points="9,14 9,16 11,16 11,14" Fill="White"/>
        <Polygon Points="9,18 9,20 11,20 11,18" Fill="White"/>
        <Polygon Points="9,22 9,24 11,24 11,22" Fill="White"/>

        <Polygon Points="25,10 25,12 13,12 13,10" Fill="White"/>
        <Polygon Points="25,14 25,16 13,16 13,14" Fill="White"/>
        <Polygon Points="25,18 25,20 13,20 13,18" Fill="White"/>
        <Polygon Points="25,22 25,24 13,24 13,22" Fill="White"/>
    </Grid>

Die Farben sind erst einmal egal (Das schwarz ist nur dazu da um das Zeichnen für mich zu vereinfachen), denn ich möchte es erst einmal so hin bekommen, dass die weißen Flächen grundsätzlich den Hintergrund als Farbe beinhalten, also durchlässig sind. Wenn ich die Eigenschaft Fill dazu nicht belege, bekommen die Flächen die selbe Farbe, wie sie die Haupt-Fläche hat und das ist ja eigentlich auch ganz logisch.

Ich könnte natürlich auch einfach fest legen, dass die Hintergrundfarbe direkt dynamisch fest gelegt wird, aber das würde sich dann mit einem Farbverlauf beißen, der ebenfalls übernommen werden soll.

Außerdem sieht mein bisheriger Code ziemlich unpraktisch aus, daher wollte ich fragen, wie ich die Bedingungen passend (eventuell auf anderem Wege) umsetzen kann. Die Möglichkeiten, die in dem Buch, welches ich lese, stehen, geben meines Erachtens nach keine gute Möglichkeit her oder ich erkenne sie nicht.

Gruß

PS: Ich kenne zwar die Theorie von WPF aus einem C#-Buch, allerdings habe ich bisher nur sehr wenig damit programmiert, speziell zu dieses Thema habe ich überhaupt keine Erfahrung. Nehmt daher bitte etwas Rücksicht auf meine Unerfahrenheit.

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Ich habe gerade kein Visual Studio zum testen, aber hast Du mal versucht, die Fill-Eigenschaft explizit auf {x:Null} zu setzen?

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Palladin007 · Verfasst: Fr 22.06.12 20:55

Nein, daran hab ich noch nicht gedacht, ist aber ein guter Hinweis, weil im Buch davon eigenartiger Weise nichts stand und ich selber nicht auf die Idee gekommen bin. ^^
Ich teste es gleich mal und editire dann, ob es hilft, oder nicht.

Edit:
So, habe es getestet und entweder ich stelle mich mal wieder zu doof an oder es funktioniert gar nicht.
Wenn ich die Eigenschaft Fill setze, bekomme ich gleich ein Auswahl von Farben, daher gehe ich davon aus, dass das ein Enum ist und da geht Null ja sowieso nicht.
Wenn ich x:Null als Zeichenfolge schreibe, gibt das einen Syntax-Fehler und wenn ich ohne Anführungszeichen schreibe, auch.

Fazit: Es geht leider nicht

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Die Fill-Eigenschaft ist ein Brush, also kann man die auch null'en

Hast Du die geschweiften Klammern mitgetippt, die gehören dazu? Und ja, wie bei jeder Property auch die Anführungszeichen.

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Palladin007 · Verfasst: Fr 22.06.12 21:11

So?

markieren

XML-Daten

1:	<Polygon Points="9,10 9,12 11,12 11,10" Fill="{x:Null}"/>

Gibt schon mal keinen Syntax-Fehler

Aber einen Effekt hat das auch nicht, nur, dass da jetzt nix mehr zu sehen ist, außer schwarz, wie die Zeichnung dahinter.
Kann man nicht irgendwie aus dem Polygon dahinter einzelne Teile "heraus schneiden" oder mit einem anderen Element eine komplexere Struktur zeichnen? Dann wird das ganze auch gleich kompakter und ich hab nicht 9 einzelne Polygon-ELemente.

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Ich habe das mit dem Durchlässig wohl falsch verstanden, das ist es nämlich was die Dinger jetzt sind. Und dahinter liegt halt das Schwarze Polygon. :nixweiss:

Ich verstehe jetzt aber, was Du meinst. Man müsste die Fill-Eigenschaft an die Background-Eigenschaft des Parent-Elements binden können. Ich schaue in der Halbzeitpause ...

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Palladin007 · Verfasst: Fr 22.06.12 21:20

Wenn du da was findest, wäre das super ^^

Aber es reicht nicht, wenn einfach die Farbe übernommen wird, denn im Programm selber will ich dahinter einen Farbverlauf legen und der soll dann exakt durch schauen, wie als wäre die Zeichnung nur eine Schablone, die darauf liegt^^

Edit: Weil ich ja so ehrgeizig bin hab ich natürlich gleich mit einem großen Projekt angefangen, es dürften also öfters so Fragen kommen, daher wollte ich dich gleich noch fragen, ob du eine gute, schön kompakte und geordnete Quelle kennst, wo die meisten Controls zu finden sind. Es muss keine Erklärung dazu sein, nur eine kurze Beschreibung, dass ich verstehe, was es tut und was anders gegenüber den anderen Controls ist. Ganz toll wäre mit Bild, aber nicht notwendig. Ich probiere dann einfach direkt aus, was ich finde und wenn ich es nicht hin bekomme, dann weiß ich zumindest genau, wonach ich suchen muss^^

PS: Viel Spaß beim Fußball schauen ^^

PS²: Gibts hier ot-Tags, mit denen man Text in den Hintergrund legen kann, wenn sie nicht ganz genau zum Thema passen?

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

So, erstmal zu Deinem Problem. Habe mal kurz recherchiert. So geht's:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:

    <Grid Background="Red">
        <Path Fill="Black">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <PathGeometry>
                            <PathFigure StartPoint="0,5">
                                <LineSegment Point="5,5" />
                                <LineSegment Point="5,0" />
                                <LineSegment Point="29,0" />
                                <LineSegment Point="29,5" />
                                <LineSegment Point="34,5" />
                                <LineSegment Point="34,29" />
                                <LineSegment Point="29,29" />
                                <LineSegment Point="29,34" />
                                <LineSegment Point="5,34" />
                                <LineSegment Point="5,29" />
                                <LineSegment Point=" 0,29" />                             
                            </PathFigure>
                        </PathGeometry> 
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <GeometryGroup>
                            <RectangleGeometry Rect="9,10,3,3" />
                            <RectangleGeometry Rect="14,10, 13,3" />
                        </GeometryGroup>
                    </CombinedGeometry.Geometry2>                    
                </CombinedGeometry>                
            </Path.Data>
        </Path>
    </Grid>

Und nein, kurz ist das nicht. Aber XAML-Code ist öfters mal eher länglich ;-)

Die Doku zu dem findest Du hier. Im wesentlichen definiert man also einen "CombinedGeometry" aus zwei Geometrien, die man von einander abzieht (weil GeometryCombineMode="Exclude").

Obiger Link ist eigentlich auch fast die einzige Referenz, die ich benutze: Die Doku von Microsoft. Die hat auch oft Beispiele dabei.

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Palladin007 · Verfasst: Fr 22.06.12 22:18

Jetzt hab ich es so:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:

<Grid>
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="3,0">
                <GradientStop Offset="0.0" Color="Yellow"/>
                <GradientStop Offset="0.05" Color="Red"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Path Fill="Black">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <PathGeometry>
                            <PathFigure StartPoint="0,5">
                                <LineSegment Point="5,5" />
                                <LineSegment Point="5,0" />
                                <LineSegment Point="29,0" />
                                <LineSegment Point="29,5" />
                                <LineSegment Point="34,5" />
                                <LineSegment Point="34,29" />
                                <LineSegment Point="29,29" />
                                <LineSegment Point="29,34" />
                                <LineSegment Point="5,34" />
                                <LineSegment Point="5,29" />
                                <LineSegment Point="0,29" />
                            </PathFigure>
                        </PathGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <GeometryGroup>
                            <RectangleGeometry Rect="8,8 3,3" />
                            <RectangleGeometry Rect="13,8 13,3" />
                            <RectangleGeometry Rect="8,13 3,3" />
                            <RectangleGeometry Rect="13,13 13,3" />
                            <RectangleGeometry Rect="8,18 3,3" />
                            <RectangleGeometry Rect="13,18 13,3" />
                            <RectangleGeometry Rect="8,23 3,3" />
                            <RectangleGeometry Rect="13,23 13,3" />
                        </GeometryGroup>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>

Und es tut genau das, was ich wollte.

Nicht unbedingt schön, mehr zweckmäßig zum ausprobieren, aber ich hab kapiert, wie es funktioniert und kann jetzt ein sinnvolles Design bauen und gleich noch auf den Button legen, wie geplant. ^^

Vielen Dank ^^

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme