Share via

[WPF] Change Color in DataTemplate

Keiner kanns 21 Reputation points
Dec 20, 2022, 1:55 PM

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. :)

272434-image.png

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,788 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
817 questions
{count} votes

Accepted answer
  1. Hui Liu-MSFT 48,576 Reputation points Microsoft Vendor
    Dec 21, 2022, 10:27 AM

    You could check the code below.

    272921-color-chan.txt

    The result:
    272880-9.gif

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

    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.


1 additional answer

Sort by: Most helpful
  1. Keiner kanns 21 Reputation points
    Dec 21, 2022, 8:15 AM

    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>

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.