Listbox (u.a.) Foreground ist ungewollt leicht transparent

  • WPF

Es gibt 11 Antworten in diesem Thema. Der letzte Beitrag () ist von Joshi.

    Listbox (u.a.) Foreground ist ungewollt leicht transparent

    Hi :-),

    ich habe mehrere Controls (Labels, Listboxes) auf einem Window. Nur werden diese ungewollt teilweise transparent dargestellt. Mein Code in der Appllication.xaml:

    XML-Quellcode

    1. ​
    2. <Style x:Key="meinstil" TargetType="{x:Type Window}">
    3. <Setter Property="WindowState" Value = "Maximized"/>
    4. <Setter Property="Opacity" Value="0.2"/>
    5. <Setter Property="Background">
    6. <Setter.Value>
    7. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    8. <GradientStop Color="Black" Offset="0"/>
    9. <GradientStop Color="Brown" Offset="1"/>
    10. </LinearGradientBrush>
    11. </Setter.Value>
    12. </Setter>
    13. <Setter Property="Background">
    14. <Setter.Value>
    15. <ImageBrush ImageSource="C:\Users\alpha\Pictures\icons\background\_20210711_165049.JPG"/>
    16. </Setter.Value>
    17. </Setter>
    18. </Style>
    20. <Style TargetType="{x:Type ListBox}">
    21. <Setter Property="Background" Value="Transparent"/>
    22. <Setter Property="Foreground" Value="Yellow"/>
    23. <Setter Property="Margin" Value="10"/>
    24. <Setter Property="Opacity" Value="1"/>
    25. </Style>


    Ich hab die Opacity des Typs Window auf "0.2" gesetzt, damit das Hintergrundbild ein bisschen transparent wird. Nur werden jetzt die Inhalte der Labels und Listboxes auch transparent gemacht. Wie kann man das dann "overrriden"?

    @Schmittmuthelm

    Und wie mache ich das? Sorry bin kompletter XAML-Neuling... Jetzt werden zwar die Listboxes richtig dargestellt aber das Hintergrundbild des Fensters hat leider auch die volle Deckkraft... Ich hab das jetzt so:

    XML-Quellcode

    1. <Style x:Key="meinstil" TargetType="{x:Type Window}">
    2. <Setter Property="WindowState" Value = "Maximized"/>
    3. <Setter Property="Background">
    4. <Setter.Value>
    5. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    6. <GradientStop Color="Black" Offset="0"/>
    7. <GradientStop Color="Brown" Offset="1"/>
    8. </LinearGradientBrush>
    9. </Setter.Value>
    10. </Setter>
    11. <Setter Property="Background">
    12. <Setter.Value>
    13. <ImageBrush ImageSource="C:\Users\alpha\Pictures\icons\background\_20210711_165049.JPG" Opacity="0.2"/>
    14. </Setter.Value>
    15. </Setter>
    16. </Style>

    Hi. @kafffee

    Bester Nickname seit... EVER :)

    XAML kann eine Bild als Hintergrund nutzen.
    Ist ja in deiner "ImageBrush" zu sehen.

    Aber dieses ist als Background festgelegt, und das Background hat die Eigenschaften mit "Opacity 0.2".

    Das ist in XAMl gewollt, wenn das Window also das Background bekommt, und darin irgendwo Opacity < 1.0,
    dann scheint es "im Hintergund" durch.

    Und dein "Setter für den Background" wird "ZWEIMAL" festgelegt.

    Einmal mit Verlauf, dann nochmals mit deiner "ImageBrush".

    Kleiner Tipp, das "erste Kindelement" in deinem Window sollte ein "Panel-Typ" sein.
    Grid ist der Standard, und dieser sollte dann mittels Image und mittels "Border" z.B.
    gezeichnet/zusammengestellt werden.

    Grid
    -> enthält Border (Verlaufsdarstellung)
    -> enthält Image (Bilddarstellung)
    -> weiteres Element (Control/nochmal ein Grid? ), dass dann die Kinder-Elemente enthält.

    Das ist der Vorteil bei XAML, es kann alles mögliche verschachtelt werden,
    es muss nicht alles in ein Panel geproft werden.

    c.u. Joshi aus HH

    Wie @Joshi schon geschrieben hat, setzt du den Background zwei mal in deinem Style. Das ist sehr verwirrend, vor allem für dich glaube ich, und auch nicht Sinn der Sache.

    XML-Quellcode

    1. <Setter Property="Background">
    2. <Setter.Value>
    3. <ImageBrush ImageSource="C:\Users\alpha\Pictures\icons\background\_20210711_165049.JPG" Opacity="0.2"/>
    4. </Setter.Value>
    5. </Setter>

    Funktioniert bei mir wie erwartet.

    "Überschreibst" du den Style eventuell wieder im Window?
    Wäre schön, wenn du mal den xaml von deinem Window posten kannst.
    Dumm ist der, der dumm ist. Nicht andersrum!

    @Joshi

    Ist ja cool, mein Spitzname ist auch "Joshi", abgesehen von dem Nickname... :)

    Das mit den Grids/Panels weiss ich. Aber wie funktioniert das mit dem Border (Verlaufsdarstellung)?

    @Schmittmuthelm

    Ja klar ich habs in der MainWindow.xaml nochmal überschrieben. Hätt ich auch selber merken können... X/

    Mein Ziel ist es, das Hintergundbild und den Verlauf darzustellen, deshalb hab ich Background zwei Mal gesetzt. Also dass das Bild nach unten hin dunkler wird oder auch nach oben, das weiss ich noch nicht so genau...

    Verstehst du wie ich meine? Wie löst man das, das dürfte doch bestimmt möglich sein?

    Du kannst in deiner App.xaml

    XML-Quellcode

    1. <Style x:Key="MeinStil" TargetType="{x:Type Window}">
    2. <Setter Property="Background">
    3. <Setter.Value>
    4. <ImageBrush ImageSource="C:\Users\alpha\Pictures\icons\background\_20210711_165049.JPG" Opacity="1" />
    5. </Setter.Value>
    6. </Setter>
    7. </Style>


    und dann in deinem eigentlichen Window in deinem Haupt-Container

    XML-Quellcode

    1. <Grid>
    2. <Grid.Background>
    3. <LinearGradientBrush EndPoint="0.5,1" Opacity="0.2" StartPoint="0.5,0">
    4. <GradientStop Color="Black" Offset="0"/>
    5. <GradientStop Color="Brown" Offset="1"/>
    6. </LinearGradientBrush>
    7. </Grid.Background>
    8. </Grid>


    Zumindest sofern ich dich richtig verstanden hab.

    Edit:
    Ob du den Background für deinen Haupt-Container direkt im Window oder auch in App.xaml schreibst und dann einfach den Style im Container übernimmst, ist dir überlassen, war vllt etwas unklar ausgedrückt von mir.
    Quasi im App.xaml:

    XML-Quellcode

    1. <ResourceDictionary>
    2. <Style x:Key="MeinWindow" TargetType="{x:Type Window}">
    3. <Setter Property="Background">
    4. <Setter.Value>
    5. <ImageBrush ImageSource="C:\Users\alpha\Pictures\icons\background\_20210711_165049.jpg" Opacity="1"/>
    6. </Setter.Value>
    7. </Setter>
    8. </Style>
    9. <Style x:Key="MeinGrid" TargetType="{x:Type Grid}">
    10. <Setter Property="Background">
    11. <Setter.Value>
    12. <LinearGradientBrush EndPoint="0.5,1" Opacity="0.5" StartPoint="0.5,0">
    13. <GradientStop Color="Black" Offset="0"/>
    14. <GradientStop Color="Brown" Offset="1"/>
    15. </LinearGradientBrush>
    16. </Setter.Value>
    17. </Setter>
    18. </Style>
    19. </ResourceDictionary>

    Und im Window:

    XML-Quellcode

    1. <Window x:Class="WpfApp1.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"
    8. Title="MainWindow" Height="450" Width="800"
    9. Style="{StaticResource MeinWindow}">
    10. <Grid Style="{StaticResource MeinGrid}">
    11. </Grid>
    12. </Window>


    Dumm ist der, der dumm ist. Nicht andersrum!

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Schmittmuthelm“ ()

    Noch eine Frage zu dem Code:

    Ich möchte eine Farbe als StaticResource festlegen. Klappt soweit mit:

    XML-Quellcode

    1. <Application.Resources>
    2. <Color x:Key="Vordergrundfarbe">Yellow</Color>
    3. </Application.Resources>


    Nun möchte ich diese für mehrere Controltypen festlegen:

    Klappt mit:

    XML-Quellcode

    1. <Style x:Key="MeinGrid" TargetType="{x:Type Grid}">
    2. <Setter Property="Background">
    3. <Setter.Value>
    4. <LinearGradientBrush EndPoint="0.5,1" Opacity="0.5" StartPoint="0.5,0">
    5. <GradientStop Color="Black" Offset="0"/>
    6. <GradientStop Color="{StaticResource Vordergrundfarbe}" Offset="3"/>
    7. </LinearGradientBrush>
    8. </Setter.Value>
    9. </Setter>
    10. </Style>


    aber nicht mit:

    XML-Quellcode

    1. <Style TargetType="{x:Type ListBox}">
    2. <Setter Property="Background" Value="Transparent"/>
    3. <Setter Property="Foreground" Value="{Staticresource Vordergrundfarbe} "/>
    4. <Setter Property="Margin" Value="10"/>
    5. <Setter Property="Opacity" Value="1"/>
    6. </Style>


    Da schlägt er mir in Zeile 3 nicht Vordergrund automatisch vor...

    Woran liegt das?

    GradientStop.Color erwartet einen Wert vom Typ Color.
    Foreground erwartet einen Wert vom Typ Brush

    Deshalb schlägt er dir beim GradientStop deine "Vordergrundfarbe" vor und beim Foreground nicht.
    Die IDE weiß quasi schon, welcher Typ für diese Eigenschaft valide ist. Du kannst Foreground auch nicht den Wert True zuweisen, weil Foreground eben einen Brush und keinen Boolean erwartet. Für die IDE ist der Unterschied zwischen Brush & Color genauso groß wie der zwischen Brush & Bool, der Typ passt einfach nicht.
    Dumm ist der, der dumm ist. Nicht andersrum!

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Schmittmuthelm“ ()

    Wenn ein Brush erwartet wird ergänze den Code in den Application.Resources mit dem Brush.

    XML-Quellcode

    1. <Application.Resources>
    2. <Color x:Key="Vordergrundfarbe">Yellow</Color>
    3. <SolidColorBrush x:Key=„VordergrundfarbeBrush“ Color=„{StaticResource Vordergrundfarbe}“/>
    4. </Application.Resources>
    Rechtschreibfehler betonen den künstlerischen Charakter des Autors.

    kafffee schrieb:

    Aber wie funktioniert das mit dem Border (Verlaufsdarstellung)?


    XML-Quellcode

    1. <Window
    2. x:Class="Window1"
    3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    6. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7. Title="Window1"
    8. Width="800"
    9. Height="450"
    10. mc:Ignorable="d">
    11. <Grid>
    12. <Border
    13. x:Name="PlatzhalterRahmenfuerVerlauf"
    14. HorizontalAlignment="Stretch"
    15. VerticalAlignment="Stretch">
    16. <Border.Background>
    17. <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
    18. <GradientStop Color="Black" />
    19. <GradientStop Offset="1" Color="White" />
    20. </LinearGradientBrush>
    21. </Border.Background>
    22. </Border>
    23. <Image/><-- Platzhalter nicht ausgeführt -->
    24. </Grid>
    25. </Window>


    So in etwa...

    Wenn der Rahmen sich über das gesamt Grid erstreckt, und diese wiedrum sich auf das ganzen Fenster erstreckt, dann...

    Ich vermeide es, für Fenster, Hintergründe festzulegen, und setze diese nur in den(m) Kindelement(en).

    Somit kann das Element mit dem Hintergrund benannt werden und damit auch angesprochen werden.

    Zudem muss die "Z-Order" (Stapel in der XAML-Hierarchie) beachtet werden.

    Also in deinem Fall, erst ein Border mit dem Verlauf, dann das Bild oben drauf.

    Z-Order ergibt sich automatisch, muss nur selten manuell festgelegt werden.

    c.u. Joshi aus f..in´ hot Hamburg.

Facebook
Telefonspende