Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing Grid Row background color in WPF

Tags:

c#

wpf

xaml

grid

I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another. I dont know ho to even start of doing it.

<ListBox
    ItemsSource="{Binding}" x:Name="station_list"
    HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
    VerticalAlignment="Top" Width="570" SelectedIndex="0">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="Stations_Template">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Text="First Name: " />
                <TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
                <TextBlock Grid.Column="2" Text="Last Name: " />
                <TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
                <CheckBox Grid.Column="4" Content="Is Active?"
                    IsEnabled="False"
                    IsChecked="{Binding Path=isactive}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
like image 465
Tomer Oszlak Avatar asked Dec 26 '14 23:12

Tomer Oszlak


2 Answers

Use Rectangles to fill the rows first, then add data to them.

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Fill="AliceBlue" />
        <TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
        <Rectangle Grid.Row="1" Fill="AntiqueWhite" />
        <TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
        <Rectangle Grid.Row="2" Fill="AliceBlue" />
        <TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
        <Rectangle Grid.Row="3" Fill="AntiqueWhite" />
        <TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
    </Grid>

Edit: If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.

    <ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="FooBar" Margin="0,0,0,10">

                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="Blue" TargetName="FooBar"/>
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="Red" TargetName="FooBar"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
like image 145
Tim Eeckhaut Avatar answered Nov 06 '22 11:11

Tim Eeckhaut


enter image description here

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Background="Cyan" />
        <Border Grid.Row="2" Grid.Column="1"  Background="Red" />
        <Border  Grid.Row="1" Background="Black" />
        <Border  Grid.Row="1" Background="Black" />
        <Border Grid.Row="2" Background="Orange" />
        <Border Grid.Row="0" Grid.Column="1" Background="Green" />
        <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
    </Grid>
</Window>
![enter image description here][1]


  [1]: http://i.stack.imgur.com/LX9X8.png
like image 42
Dhru 'soni Avatar answered Nov 06 '22 11:11

Dhru 'soni