Question

My project requirement is like, Image in Grid background and want to apply gradient at top and bottom with black color. Kindly help me how can i achieve that.

My XAML as below:

<Grid Grid.Row="0" HorizontalAlignment="Stretch" Height="190" VerticalAlignment="Stretch" ShowGridLines="False" Margin="0,2,0,0">
     <Grid.Background>
             <ImageBrush Stretch="UniformToFill" Opacity="0.6">
                   <ImageBrush.ImageSource>
                         <BitmapImage CreateOptions="BackgroundCreation" UriSource="{Binding Banner}"></BitmapImage>
                    </ImageBrush.ImageSource>
              </ImageBrush>
     </Grid.Background>
     .....
</Grid

Answer 1

Create another grid inside this one. In this new grid, create three rows. The first and last row should have a rectangle with a gradient. Something like this:

<Grid Grid.Row="0" HorizontalAlignment="Stretch" Height="190" VerticalAlignment="Stretch" ShowGridLines="False" Margin="0,2,0,0">
     <Grid.Background>
         <ImageBrush Stretch="UniformToFill" Opacity="0.6">
               <ImageBrush.ImageSource>
                     <BitmapImage CreateOptions="BackgroundCreation" UriSource="{Binding Banner}"></BitmapImage>
                </ImageBrush.ImageSource>
          </ImageBrush>
      </Grid.Background>
      <Grid Grid.ColumnSpan="..." Grid.RowSpan="...">
           <Grid.RowDefinitions>
                <RowDefinition Height="25"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
           </Grid.RowDefinitions>
           <Rectangle Grid.Row="0">
                <Rectangle.Fill>
                     ...
                </Rectangle.Fill>
           </Rectangle>
           <Rectangle Grid.Row="2">
                <Rectangle.Fill>
                     ...
                </Rectangle.Fill>
           </Rectangle>
      </Grid>
</Grid