ListBox Items umstylen mit Triggers

  • WPF

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von Amro.

    ListBox Items umstylen mit Triggers

    Hallo,

    ich hab ein klitzkleines Problem mit meinem Styling:

    XML-Quellcode

    1. <Style TargetType="{x:Type ListBoxItem}">
    2. <Setter Property="BorderThickness" Value="0"/>
    3. <Style.Triggers>
    4. <Trigger Property="IsMouseOver" Value="True">
    5. <Setter Property="BorderThickness" Value="1"/>
    6. </Trigger>
    7. <Trigger Property="IsSelected" Value="True">
    8. <Setter Property="Background" Value="Transparent"/>
    9. <Setter Property="Foreground" Value="White"/>
    10. <Setter Property="BorderThickness" Value="0"/>
    11. </Trigger>
    12. </Style.Triggers>
    13. </Style>


    Und zwar das komische ist:
    Beim IsSelected-Trigger, wird die Schrift zwar weiss, aber der Background und die BorderThickness bleiben bei den Default-Werten.

    Hat jemand eine Idee warum?

    Du musst das Template des ListboxItems bearbeiten.
    Hier mal ein Standard Style den man sich generieren lassen kann wenn man mit der rechten Maustaste auf das ListboxItem klickt und dann Vorlage bearbeiten -> Kopie bearbeiten wählt.

    XML-Quellcode

    1. <Style x:Key="FocusVisual">
    2. <Setter Property="Control.Template">
    3. <Setter.Value>
    4. <ControlTemplate>
    5. <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    6. </ControlTemplate>
    7. </Setter.Value>
    8. </Setter>
    9. </Style>
    10. <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
    11. <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
    12. <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
    13. <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
    14. <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
    15. <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
    16. <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
    17. <Setter Property="SnapsToDevicePixels" Value="True"/>
    18. <Setter Property="Padding" Value="4,2"/>
    19. <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    20. <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    21. <Setter Property="Background" Value="Transparent"/>
    22. <Setter Property="BorderBrush" Value="Transparent"/>
    23. <Setter Property="BorderThickness" Value="1"/>
    24. <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    25. <Setter Property="Template">
    26. <Setter.Value>
    27. <ControlTemplate TargetType="{x:Type ListBoxItem}">
    28. <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
    29. <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    30. </Border>
    31. <ControlTemplate.Triggers>
    32. <MultiTrigger>
    33. <MultiTrigger.Conditions>
    34. <Condition Property="IsMouseOver" Value="True"/>
    35. </MultiTrigger.Conditions>
    36. <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
    37. <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
    38. </MultiTrigger>
    39. <MultiTrigger>
    40. <MultiTrigger.Conditions>
    41. <Condition Property="Selector.IsSelectionActive" Value="False"/>
    42. <Condition Property="IsSelected" Value="True"/>
    43. </MultiTrigger.Conditions>
    44. <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
    45. <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
    46. </MultiTrigger>
    47. <MultiTrigger>
    48. <MultiTrigger.Conditions>
    49. <Condition Property="Selector.IsSelectionActive" Value="True"/>
    50. <Condition Property="IsSelected" Value="True"/>
    51. </MultiTrigger.Conditions>
    52. <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
    53. <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
    54. </MultiTrigger>
    55. <Trigger Property="IsEnabled" Value="False">
    56. <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    57. </Trigger>
    58. </ControlTemplate.Triggers>
    59. </ControlTemplate>
    60. </Setter.Value>
    61. </Setter>
    62. </Style>
    Rechtschreibfehler betonen den künstlerischen Charakter des Autors.

    Ja ich weiss dass das so geht. Wollte ich aber eigentlich vermeiden zwecks Übersichtlichkeit. Aber gut könnte man jetzt auslagern in ein Resource Dictionary...
    Irgendwelche anderen Ideen? Würde mich jetzt schon interessieren...
    Ich hab das Ganze auch in nem Datagrid.RowStyle und da funktionierts. Und irgendwo overrriden tu ich es auch nicht...

    Musst es natürlich anpassen!
    Spoiler anzeigen

    XML-Quellcode

    1. <Style x:Key="_ListBoxItemStyle" TargetType="ListBoxItem">
    2. <Setter Property="Template">
    3. <Setter.Value>
    4. <ControlTemplate TargetType="ListBoxItem">
    5. <Border Name="_Border"
    6. Padding="2"
    7. SnapsToDevicePixels="true"
    8. BorderThickness="1"
    9. BorderBrush="Black"
    10. Margin="5">
    11. <ContentPresenter />
    12. </Border>
    13. <ControlTemplate.Triggers>
    15. <Trigger Property="IsMouseOver" Value="True">
    16. <Setter TargetName="_Border" Property="BorderThickness" Value="5"/>
    17. <Setter TargetName="_Border" Property="BorderBrush" Value="Red"/>
    18. </Trigger>
    19. <Trigger Property="IsSelected" Value="True">
    20. <Setter TargetName="_Border" Property="BorderThickness" Value="1"/>
    21. <Setter TargetName="_Border" Property="BorderBrush" Value="Black"/>
    23. </Trigger>
    25. </ControlTemplate.Triggers>
    26. </ControlTemplate>
    27. </Setter.Value>
    28. </Setter>
    29. </Style>

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

    Hab das jetzt im Endeffekt so drin stehen. Aber das Problem bleibt bestehen:

    Beim IsSelected-Trigger wird die Schrift weiss. Der angezeigte Border ist jetzt nicht mehr Default, sondern wird gar nicht angezeigt...

    XML-Quellcode

    1. <Style TargetType="{x:Type ListBoxItem}">
    2. <Setter Property="Template">
    3. <Setter.Value>
    4. <ControlTemplate TargetType="ListBoxItem">
    5. <Border Name="_Border"
    6. Padding="1"
    7. SnapsToDevicePixels="true">
    8. <ContentPresenter />
    9. </Border>
    10. <ControlTemplate.Triggers>
    11. <Trigger Property="IsSelected" Value="true">
    12. <Setter Property="Background" Value="Transparent"/>
    13. <Setter Property="Foreground" Value="White"/>
    14. <Setter Property="BorderThickness" Value="1"/>
    15. <Setter Property="BorderBrush" Value="Aquamarine"/>
    16. </Trigger>
    17. <Trigger Property="IsMouseOver" Value="True">
    18. <Setter Property="BorderThickness" Value="1"/>
    19. <Setter Property="BorderBrush" Value="Aquamarine"/>
    20. </Trigger>
    21. </ControlTemplate.Triggers>
    22. </ControlTemplate>
    23. </Setter.Value>
    24. </Setter>
    25. </Style>


    Ich rauf mir grad echt die Haare...

    Edit: Hatte grad nen Geistesblitz:

    XML-Quellcode

    1. <Style TargetType="{x:Type ListBoxItem}">
    2. <Setter Property="Template">
    3. <Setter.Value>
    4. <ControlTemplate TargetType="ListBoxItem">
    5. <Border Name="_Border"
    6. Padding="1"
    7. SnapsToDevicePixels="true">
    8. <ContentPresenter />
    9. </Border>
    10. <ControlTemplate.Triggers>
    11. <Trigger Property="IsSelected" Value="true">
    12. <Setter TargetName="_Border" Property="Background" Value="Transparent"/>
    13. <Setter Property="Foreground" Value="White"/>
    14. <Setter TargetName="_Border" Property="BorderThickness" Value="1"/>
    15. <Setter TargetName="_Border" Property="BorderBrush" Value="Aquamarine"/>
    16. </Trigger>
    17. <Trigger Property="IsMouseOver" Value="True">
    18. <Setter TargetName="_Border" Property="BorderThickness" Value="1"/>
    19. <Setter TargetName="_Border" Property="BorderBrush" Value="Aquamarine"/>
    20. </Trigger>
    21. </ControlTemplate.Triggers>
    22. </ControlTemplate>
    23. </Setter.Value>
    24. </Setter>
    25. </Style>


    Jetzt gehts :thumbsup: :thumbsup: Vielen Dank :D

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

Facebook
Telefonspende