2010-10-27 2 views
23

Я пытаюсь применить фон градиента только к одной строке в сетке Silverlight XAML, которую я создал.Применение цвета фона для всей строки Grid в XAML Silverlight

я могу сделать что-то вроде этого, без каких-либо проблем:

<Grid> 
    <Grid.Background> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop Color="Black" Offset="0" /> 
      <GradientStop Color="White" Offset="1" /> 
     </LinearGradientBrush> 
    </Grid.Background> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <!-- components and various stuffs --> 
</Grid> 

К сожалению, это относится градиент ко всей сетке.

Кажется, что я не могу применить градиент (или даже цвет) к определению отдельной строки в сетке. Является ли это возможным?

Спасибо!

ответ

46

Используйте Border, а затем используйте Grid.Row и Grid.ColumnSpan, чтобы поместить его в определенную строку Grid, которую вы хотите.

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <Border Grid.Row="1" Grid.ColumnSpan="2"> 
     <Border.Background> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop Color="Black" Offset="0" /> 
      <GradientStop Color="White" Offset="1" /> 
     </LinearGradientBrush> 
     </Border.Background> 
    </Border> 

    <!-- other controls in the grid --> 
</Grid> 
+1

Вы да человек , человек. –

+0

Рад, что я мог помочь. – Donut

+0

Спасибо! Я применил это к аналогичному случаю, когда у меня был фон изображения, который должен был применяться к нескольким строкам, но строки были автоматизированы, поэтому использование изображения не собиралось его сокращать, Граница отлично работает! – jv42

0

Если вы хотите имитировать два цвета в вертикальном порядке, вы также можете использовать свойство Offset. Если установить эти два на том же значении, вы получите это моделирование:

<Border.Background> 
 
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
 
       <GradientStop Color="Green" Offset="0.366" /> 
 
       <GradientStop Color="Red" Offset="0.366" /> 
 
      </LinearGradientBrush> 
 
</Border.Background>

Вы можете сделать еще больше :)

<Border.Background> 
 
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
 
    <GradientStop Color="Green" Offset="0.3" /> 
 
    <GradientStop Color="Red" Offset="0.3" /> 
 
    <GradientStop Color="Red" Offset="0.7" /> 
 
    <GradientStop Color="Yellow" Offset="0.7" /> 
 
    <GradientStop Color="Yellow" Offset="0.9" /> 
 
    <GradientStop Color="Blue" Offset="0.9" /> 
 
    </LinearGradientBrush> 
 
</Border.Background>

Смежные вопросы