[WPF] Change Color in DataTemplate

Question

Hello, as it says in the title, I would like to change the color inside or the content of the gird as soon as it is selected.
The code below is the current situation I am using as a compromise solution, but here the whole item is colored and not only the gird.
I've tried a lot of different things, but haven't come up with a good solution yet.

<UserControl x:Class="MyApp.WPF.Pages.User.AthletesOverviewView"
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:MyApp.WPF.Pages.User"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">

<UserControl.Resources>  
    <Style TargetType="ListViewItem">  
        <Setter Property="Background" Value="Green"/>  
        <Style.Triggers>  
            <Trigger Property="IsSelected" Value="False">  
                <Setter Property="Background" Value="Red"/>  
            </Trigger>  
        </Style.Triggers>  
    </Style>  
</UserControl.Resources>  

<Grid>  
    <Grid.RowDefinitions>  
        <RowDefinition Height="auto" />  
        <RowDefinition Height="*" />  
    </Grid.RowDefinitions>  

    <WrapPanel Grid.Row="0" HorizontalAlignment="Center">  
        <Button Margin="5" Content="Add" MinWidth="50" Command="{Binding AddNewAthlet}"/>  
        <Button Margin="5" Content="Details" MinWidth="50" Command="{Binding DetailsAthlet}"/>  
        <Button Margin="5" Content="Modify" MinWidth="50" Command="{Binding ModifyAthlet}"/>  
        <Button Margin="5" Content="CurrentAthlet" MinWidth="50" Command="{Binding DeleteAthlet}"/>  
        <Button Margin="100 5 5 5" Background="OrangeRed" Content="Delete" MinWidth="50" Command="{Binding DeleteAthlet}"/>  
        <TextBlock Margin="50 5 5 5" Text="{Binding HeadLastName, UpdateSourceTrigger=PropertyChanged}" MinWidth="50" Background="LightGray"/>  
    </WrapPanel>  

    <ListView ItemsSource="{Binding AllAthletesItemViewModels}"  
              SelectedItem="{Binding SelectedAllAthletesItemViewModel}"  
              ScrollViewer.HorizontalScrollBarVisibility="Disabled"  
              Grid.Row="1">  
        <ListView.ItemsPanel>  
            <ItemsPanelTemplate>  
                <WrapPanel />  
            </ItemsPanelTemplate>  
        </ListView.ItemsPanel>  
        <ListView.ItemTemplate>  
            <DataTemplate>  
                <Border Height="200" Width="200"   
                        BorderBrush="Orange" BorderThickness="1"  
                        CornerRadius="10" Padding="5">  
                    <Grid>  
                        <Grid.RowDefinitions>  
                            <RowDefinition Height="5*"/>  
                            <RowDefinition/>  
                        </Grid.RowDefinitions>  
                        <local:AllAthletesItemView />  
                        <!--<TextBlock Text="{Binding FirstName}"/>-->  
                        <TextBlock Grid.Row="1" Text="{Binding LastName}"/>  
                    </Grid>  
                </Border>  
            </DataTemplate>  
        </ListView.ItemTemplate>  
    </ListView>  


</Grid>  

</UserControl>

As you can see in the picture the red goes beyond the golden border and it should not be like that, the red should only be inside the golden border.
It would also be perfect if you can turn off the mousover ("the blue") effect but I think I can do that myself. :)

Answer 1

You could check the code below.

272921-color-chan.txt

The result:

----------------------------------------------------------------------------

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello yes sure it's just a test program anyway where I try things to get better. Here is the code for AllAthletesItemView, it's only a "Container" to present data from the DB, in the ViewModel of AllAthletesItemView itself is nothing special only the string decleration etc.
I have also extended the first post with all the xaml code, the viewmodel is also very simple and probably not needed to solve my "problem". i would prefer a solution based on xaml code.
But thank you for your interest.

<UserControl x:Class="MyApp.WPF.Pages.User.AllAthletesItemView"
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:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:MyApp.WPF.Pages.User"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="200">

    <Grid >  
        <Grid.RowDefinitions>  
            <RowDefinition Height="auto" />  
            <RowDefinition Height="*" />  
            <RowDefinition Height="auto" />  
        </Grid.RowDefinitions>  
          
        <Grid Grid.Row="0">  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="*" />  
                <ColumnDefinition Width="auto" />  
            </Grid.ColumnDefinitions>  
                    <TextBlock>  
                        <TextBlock.Text>  
                            <MultiBinding StringFormat="{}{0} {1}">  
                                <Binding Path="FirstName" />  
                                <Binding Path="LastName" />  
                            </MultiBinding>  
                        </TextBlock.Text>  
                    </TextBlock>  
                <fa:FontAwesome Grid.Column="1" HorizontalAlignment="Right" Icon="User" FontSize="16" ></fa:FontAwesome>  
        </Grid>  
        <Image Grid.Row="1" Height="50" Width="50" HorizontalAlignment="Left" Name="AnyImage" />  

        <TextBlock Grid.Row="2" Text="Some More Information maybe the Discription" />  
    </Grid>  

</UserControl>