Laden...

Wie kann man Sub Objekte über einen Globalen Trigger einfärben?

Erstellt von FrankenDerStein vor 4 Jahren Letzter Beitrag vor 4 Jahren 1.450 Views
FrankenDerStein Themenstarter:in
72 Beiträge seit 2015
vor 4 Jahren
Wie kann man Sub Objekte über einen Globalen Trigger einfärben?

Hallo liebe Kollegen,

ich beschäftige mich derzeit mit WPF und habe ein Problem... oder ich verstehe etwas nicht. 🤔

Ich versuche über ein Trigger den Hintergrund eines Teil Objektes farblich zu verändern.

Dies soll gesehen, wenn die Maus über egal welchem Objekt schwebt.

Leider Funktioniert es nicht wie ich es gedacht habe.

Das Objekt, das verändert werden soll, habe ich den Namen XXX gegeben.

Ich hoffe ihr könnt mir Erklärern was ich falsch mache:


<UserControl x:Class="Communication.Windows.Items.Device"
             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" 
             xmlns:local="clr-namespace:Communication.Windows.Items"
             xmlns:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"
             xmlns:fa="http://schemas.fontawesome.io/icons/"
             mc:Ignorable="d" 
             d:DesignHeight="72.803" Height="72.803" d:DesignWidth="669.25" Margin="5,5,5,0" >
    <Grid Background="#FF404040">
        <Grid Loaded="IsLoaded">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="Background" Value="Transparent"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="XXX" Property="Background" Value="Blue" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <Image MaxWidth="80" MaxHeight="80" x:Name="image" HorizontalAlignment="Left"  Margin="10,10,0,10" VerticalAlignment="Top" Source="pack://siteoforigin:,,,/Resources/34100.png"  Grid.Row="0"/>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Label x:Name="nameLabel" Content="Name :" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Height="24" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0"/>
                <Label x:Name="IPLabel" Content="IP :" HorizontalAlignment="Left"  VerticalAlignment="Top" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="1"/>
            </Grid>
            <Grid Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label x:Name="NameValueLabel" Content="xxx" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Height="24" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0"/>
                <Label x:Name="IPValueLabel" Content="192.168.178.14" HorizontalAlignment="Left"  VerticalAlignment="Top" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="1"/>
            </Grid>
            <Grid Grid.Column="4" HorizontalAlignment="Right">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label x:Name="PingLabel" Content="Ping :" Margin="0,10,0,0" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
            <Grid Grid.Column="5" HorizontalAlignment="Right">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label x:Name="PingValueLabel"  Margin="0,10,0,0" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
            <Border Grid.Column="6" HorizontalAlignment="Right" BorderBrush="Black" BorderThickness="1,0,0,0" x:Name="XXX">
                <Grid Width="15" >
                    <fa:ImageAwesome Icon="AngleRight"  Width="10" Height="10" Foreground="DarkGray" />
                </Grid> 
            </Border>
        </Grid>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Name="selectfeld">
            <fa:ImageAwesome Icon="Gear" Spin="True" Width="50" Height="50" Name="loading" Foreground="DarkGray" />
        </Grid>
    </Grid>
</UserControl>

Mit freundlichen Grüßen, FrankenDerStein.

PS. Sorry für die seltsame Wort Wahl. Ich hoffe ihr versteht was ich bezwecke.

3.170 Beiträge seit 2006
vor 4 Jahren

Hallo,

so rum geht's nicht, das musst Du genau andersrum machen.
Sprich, die Border (dein Target) bekommt den Style und reagiert per DataTrigger auf das MouseOver des Elternelements:

<Border Grid.Column="6" HorizontalAlignment="Right" BorderBrush="Black" BorderThickness="1,0,0,0" x:Name="XXX">
    <Border.Style>
        <Style TargetType="Border">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=IsMouseOver}" Value="True" >
                    <Setter Property="Background" Value="Blue" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <Grid Width="15" >
        <fa:ImageAwesome Icon="AngleRight"  Width="10" Height="10" Foreground="DarkGray" />
    </Grid>
</Border>

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

FrankenDerStein Themenstarter:in
72 Beiträge seit 2015
vor 4 Jahren

Danke für die Antwort und Entschuldigung für die Wartezeit.

Es funktioniert fast so wie ich es gern hätte aber leider färbt er die gewünschte stelle nur ein, wenn der Messzeiger über irgendein Schriftzug oder Bild bewegt.

Also nicht überall auf dem Element.

Mit freundlichen Grüßen, FrankenDerStein.

3.170 Beiträge seit 2006
vor 4 Jahren

Hallo,

Machst Du mittlerweile irgendwas anders, oder spielst Du noch im CodeBehind oder sonstwo mit den Mausereignissen rum?
Ansonsten sollte es eigentlich mit meinem Vorschlag funktionieren.

Ich hatte das mehr oder weniger 1:1 mit Deinem Code getestet und nur den Style entsprechend verschoben und angepasst und den fa-Namespace und die zugehörigen Elemente rausgeschmissen, an der Struktur aber sonst nichts geändert. Dabei ergab sich das von Dir beschriebene gewünschte Verhalten.

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

FrankenDerStein Themenstarter:in
72 Beiträge seit 2015
vor 4 Jahren

Ich habe deine Lösung 1:1 übernommen. Ich habe ansonsten nichts am Code geändert.

<UserControl x:Class="Communication.Windows.Items.Device"
             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" 
             xmlns:local="clr-namespace:Communication.Windows.Items"
             xmlns:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"
             xmlns:fa="http://schemas.fontawesome.io/icons/"
             mc:Ignorable="d" 
             d:DesignHeight="72.803" Height="72.803" d:DesignWidth="669.25" Margin="5" >
    <Grid Background="#FF404040">
        <Grid Loaded="IsLoaded">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Image MaxWidth="80" MaxHeight="80" x:Name="image" HorizontalAlignment="Left"  Margin="10,10,0,10" VerticalAlignment="Top" Source="pack://siteoforigin:,,,/Resources/34100.png"  Grid.Row="0"/>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Label x:Name="nameLabel" Content="Name :" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Height="24" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0"/>
                <Label x:Name="IPLabel" Content="IP :" HorizontalAlignment="Left"  VerticalAlignment="Top" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="1"/>
            </Grid>
            <Grid Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label x:Name="NameValueLabel" Content="xxx" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Height="24" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0"/>
                <Label x:Name="IPValueLabel" Content="192.168.178.14" HorizontalAlignment="Left"  VerticalAlignment="Top" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="1"/>
            </Grid>
            <Grid Grid.Column="4" HorizontalAlignment="Right">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label x:Name="PingLabel" Content="Ping :" Margin="0,10,0,0" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
            <Grid Grid.Column="5" HorizontalAlignment="Right">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label x:Name="PingValueLabel"  Margin="0,10,0,0" FontStyle="Normal" FontSize="15" FontFamily="Calibri" Foreground="DarkGray" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
            <Border Grid.Column="6" HorizontalAlignment="Right" BorderBrush="Black" BorderThickness="1,0,0,0">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=IsMouseOver}" Value="True" >
                                <Setter Property="Background" Value="Blue" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Grid Width="15" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="48*"/>
                        <RowDefinition Height="25*"/>
                    </Grid.RowDefinitions>
                    <fa:ImageAwesome Icon="AngleRight"  Width="10" Height="10" Foreground="DarkGray" Margin="2,32,3,5.823" />
                </Grid>
            </Border>

        </Grid>
        
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <fa:ImageAwesome Icon="Gear" Spin="True" Width="50" Height="50" Name="loading" Foreground="DarkGray" />
        </Grid>
    </Grid> 
</UserControl>

Ich verstehe es daher auch nicht.

Deine Logik ist für mich eigentlich sehr einleuchtend.

Mit freundlichen Grüßen, FrankeDerStein.

FrankenDerStein Themenstarter:in
72 Beiträge seit 2015
vor 4 Jahren

Ich habe das Problem gelöst, es war die Hintergrundfarbe. Diese musste auf ein Grid drüber verschieben, dann ging es.

Danke für die Hilfe.