Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

C# Change backgroundcolor specific row

I've created a new project from the Grid App (XAML) template (C# Windows Store). So far I've changed nothing in the template, but I would like to change the backgroundcolor from a specific row in the grid.

<!--
    This grid acts as a root panel for the page that defines two rows:
    * Row 0 contains the back button and page title
    * Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

I would like to change the backgroundcolor from row 0 (which contains the page title). Any ideas?? Thanks in advance!

This row consits of:

    <!-- Back button and page title -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>
like image 562
user1951083 Avatar asked Mar 12 '13 08:03

user1951083


2 Answers

You can't set the background color on the Grid.Row itself, instead set the Background property on whatever occupies this row.

For example

<Grid Style="{StaticResource LayoutRootStyle}">
  <Grid.RowDefinitions>
    <RowDefinition Height="140"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid Background="Red" Grid.Row="0">
    <TextBlock>Test</TextBlock>
  </Grid>
</Grid>

EDIT: Updated for Silverlight; TextBlock doesn't have Background so you have to put the control in another Border or grid container which does have background. Code updated to reflect this.

like image 106
Dutts Avatar answered Oct 20 '22 19:10

Dutts


How about inserting border where you need it

<Grid Style="{StaticResource LayoutRootStyle}">
  <Grid.RowDefinitions>
    <RowDefinition Height="140"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
    <Border Background="Red" Grid.ColumnSpan="1"></Border>
    <TextBlock>Test</TextBlock>
    <Border Background="blue" Grid.Row="1" Grid.ColumnSpan="1"></Border>
    <TextBlock Grid.Row="1">Test2</TextBlock>
 </Grid>

note that you can especify the columns span in case of include more columns

like image 33
i31nGo Avatar answered Oct 20 '22 17:10

i31nGo