ViewBox für MenuItem geht anscheinend durch Style verloren

  • WPF

Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von Nofear23m.

    ViewBox für MenuItem geht anscheinend durch Style verloren

    Hallo zusammen.

    Da ich jetzt doch mal mit der WPF anfangen will, beginnt mein diesbezügliches Wissensniveau bei nahezu Null. Möge es sich kontinuierlich steigern.
    Ich werde eines meiner kleineren WinForms-Programme in der WPF neu schreiben, kämpfe aber schon mit den Anfängen.

    Ich habe ein Menü, in dem ich nur Vektorgrafik-Items anzeigen will, keinen Text. Dazu erstelle ich mir (mangels besseren Wissens) Grafiken in Inkscape, exportiere es in eine XAML-Datei und kopiere mir die Pfadangaben raus. Das klappt, auch wenn ich nicht glaube, dass das der effizienteste Weg ist. Nachdem ich nach Rumprobieren mit Canvas und ViewBox ein (vermeintlich?) akzeptables Ergebnis erzielt habe, will ich den XAML-Code auslagern, indem ich Styles verwende.

    XML-Quellcode

    1. <Window x:Class="MainWindow"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6. xmlns:local="clr-namespace:WpfApp1"
    7. mc:Ignorable="d" d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True,Type={x:Type local:MainWindow}}"
    8. Title="WPF-App1" Width="400" Height="400">
    10. <Window.Resources>
    11. <Style TargetType="{x:Type MenuItem}">
    12. <Setter Property="Width" Value="32"/>
    13. <Setter Property="Height" Value="32"/>
    14. <Setter Property="Margin" Value="1"/>
    15. <Setter Property="Padding" Value="0"/>
    16. <Setter Property="Background" Value="White"/>
    17. <Setter Property="Header">
    18. <Setter.Value>
    19. <Viewbox MaxHeight="32" MaxWidth="32" Height="28" Width="28" Margin="1"/>
    20. </Setter.Value>
    21. </Setter>
    22. </Style>
    23. *** - GeometryPfad-Details siehe Spoiler unten
    24. </Window.Resources>
    26. <Grid>
    27. <Menu VerticalAlignment="Top" Background="White">
    28. <MenuItem Header="{StaticResource GoToCheckPoint}" ToolTip="gehe zu Checkpoint"/>
    29. <MenuItem Header="{StaticResource GoToConfigurationSite}" ToolTip="gehe zur Konfigurationsseite des Checkpoints"/>
    30. </Menu>
    31. </Grid>
    32. </Window>


    GeometryPath-Details

    XML-Quellcode

    1. <PathGeometry x:Key="GoToCheckPointPath" Figures="M 0.47215715 7.2 H 19.740345 v -6.74398 l 11.560913 10.59768 -11.560913 10.59767 v -6.74397 H 0.47215715 Z" FillRule="NonZero"/>
    3. <Path x:Key="GoToCheckPoint" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StrokeThickness="1" Stroke="blue" StrokeLineJoin="Round" Data="{StaticResource GoToCheckPointPath}"/>
    5. <Canvas x:Key="GoToConfigurationSite">
    6. <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StrokeThickness="0.9443143" Stroke="#FF000000" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat">
    7. <Path.Data>
    8. <PathGeometry Figures="M 0.47215715 -4.6647324 H 19.740345 V -11.408712 L 31.301258 -0.81103238 19.740345 9.7866376 v -6.74397 H 0.47215715 Z" FillRule="NonZero"/>
    9. </Path.Data>
    10. </Path>
    11. <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path817" Fill="#FFAAD400" StrokeThickness="1" Stroke="#FF000000" StrokeMiterLimit="4">
    12. <Path.Data>
    13. <PathGeometry Figures="m 13.748884 283.3456 -2.925465 0.0201 -2.8449804 0.68179 -2.0828513 -2.05438 -2.493802 -1.52961 -0.020132 -2.92546 -0.6817883 -2.84498 2.0543808 -2.08285 1.5296078 -2.49381 2.9254649 -0.0201 2.8449802 -0.68179 2.082851 2.05439 2.493802 1.5296 0.02013 2.92547 0.681788 2.84498 -2.05438 2.08285 z" FillRule="NonZero"/>
    14. </Path.Data>
    15. <Path.RenderTransform>
    16. <MatrixTransform Matrix="1.0645012 -0.28519576 0.28523225 1.0643652 -78.595099 -292.16811"/>
    17. </Path.RenderTransform>
    18. </Path>
    19. <Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="8.4" Canvas.Top="-3" Width="5" Height="5" Name="path821" Fill="#FFFFFFFF" StrokeThickness="0.9986378" Stroke="#FF000000" StrokeMiterLimit="4"/>
    20. </Canvas>



    Anscheinend geht die durch den Style festgelegte ViewBox verloren, da der Header im konkreten MenuItem überschrieben wird. Wo ist mein Denkfehler oder wie macht man es richtig? Denn: Die ViewBox will ich (weil ich es nicht besser weiß) dazu nutzen, um die jeweilige Vektorgrafik passgenau in das MenuItem einzufügen. Doch wenn ich Höhe und Breite der ViewBox im Style ändere, geschieht nix. Verwende ich keine Styles/Ressourcen, klappt es.
    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.

    Hallo

    Ich versuche die "Icons" immer so einfach wie möglich zu halten.

    Meine Icons liegen in etwa so in einem ResourceDictionary:

    XML-Quellcode

    1. ​ <Viewbox x:Key="testIcon" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform">
    2. <Path Fill="Black" Data="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z" />
    3. </Viewbox>


    MenuItem sind (genauso wie das Contextmenü) eine Zicke. Lieder.

    Folgendes beachte ich persönlich immer.
    Die Viewbox in den Icons-Resourcen immer etwas größer halten. (in der Maximalgröße in welcher ich diese vermutlich benötige). Hier sind es 48x48
    Die Anwendung sollte dann immer <= dieser Größe sein.

    XML-Quellcode

    1. ​
    2. <Menu VerticalAlignment="Top" Background="White">
    3. <MenuItem ToolTip="gehe zur Konfigurationsseite des Checkpoints">
    4. <MenuItem.Header>
    5. <StackPanel Orientation="Horizontal">
    6. <Viewbox Child="{StaticResource testIcon}" Height="32" Width="32"/>
    7. <TextBlock Margin="10,0,0,0" Text="Testeintrag" VerticalAlignment="Center"/>
    8. </StackPanel>
    9. </MenuItem.Header>
    11. </MenuItem>
    12. </Menu>


    In diesem Fall ist das Icon 32x32 und daneben ist dann noch ein Text.
    So sollte das klappen.

    Grüße
    Sascha

    PS: Ich hole mir den großteil meiner Icons unter materialdesignicons.com/
    Eine Zeitlang habe ich auch sehr viele Icons mit xaml-icon-studio.com/ erstellt.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Ah, ok. Statt im Setter die ViewBox festlegen zu wollen, einfach die ViewBox in die Ressourcen an sich verschieben. Ok.
    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.

    Hallo

    Ich habe mal angefangen ein Control zu erstellen um das ganze mit XAML Icons zu vereinfachen und um auch gleich ein paar Funktionalitäten welche man öfters benötigt direkt bei der Hand zu haben.

    Wäre interessant ob dies in deiner Konstellation auch funktioniert.
    Ist auf Git: github.com/NoFear23m/SpsModernWpfControls
    Nuget folgt noch wenn ich soweit bin.

    Anwendung hier alleinstehend und in einem Button:

    XML-Quellcode

    1. ​
    2. <StackPanel>
    3. <icon:XamlContentIcon XamlIcon="{StaticResource AlertIconPath}" Caption="Hallo Welt" Background="Yellow"/>
    4. <icon:XamlPathIcon Name="Icon2" XamlPath="{StaticResource AlertIconPath}" IconSize="Small" IconForeground="Red" Caption="Hallo Welt"
    5. CaptionPosition="AboveIcon" CaptionMargin="0,0,0,8"/>
    6. <Button Click="Button_Click" IsEnabled="False">
    7. <icon:XamlPathIcon Name="Icon3" XamlPath="{StaticResource AlertIconPath}" IconSize="Small" IconForeground="Red" Caption="Hallo Welt"
    8. IsEnabled="False" />
    9. </Button>
    10. </StackPanel>




    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    VS2022 ist wohl noch nicht soweit. Allerdings weiß ich jetzt nicht genau, worauf Dein Projekt abzielt. Klingt wie: Erstellung eines neuen, einbindbaren ControlTypes. Aber um sowas adäquat zu testen, fühl ich mich noch zu sehr an der Startlinie festgetackert.
    Bilder

    • Pic.png

      6,93 kB, 781×437, 55 mal angesehen
    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.

    VaporiZed schrieb:

    VS2022 ist wohl noch nicht soweit.

    Doch, alles gut, dein Screenshot zeigt alles richtig an. :thumbsup:

    VaporiZed schrieb:

    worauf Dein Projekt abzielt

    Das man Icons (XAML Paths) simple und komfortabel einbinden kann ohne in den Styles immer die ViewBox mit reinpacken zu müssen und um die Farbe der Icons von außen auch über Binding beeinflussen zu können.

    VaporiZed schrieb:

    fühl ich mich noch zu sehr an der Startlinie festgetackert

    Kein Problem, hast aber bis jetzt alles richtig gemacht. DLL Referenzieren und dann wie im Demo einfach das Icon erstellen.
    Aber wenn du ohne klarkommst ists ja gut, wollte es nur mit dir teilen.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

Facebook
Telefonspende