Make a grid 3d looking

Kind of new to Silverlight, how can I make a grid 3d-looking (kind of like how the Silverlight progress bar visual开发者_C百科ly stands out). I feel like I have tried everything but I have ran out of ideas. Could anyone give me a code snippet that can do this?

Have you tried using the DropShadowEffect?

<data:DataGrid>
  <data:DataGrid.Effect>
    <DropShadowEffect />
  </data:DataGrid.Effect>
  ...
  ...
</data:DataGrid>

You can use this on other controls as well of course.

Creating a sunken effect is all about the illusion of lighting. If you draw a border around the element with a dark color on the top and left and lighter color on the bottom and right you get the impression that the content has been sunk into the surface. Switching the shade will give the effect of the content being raised.

Here is a small example to demonstrate

<UserControl x:Class="SilverlightApplication1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400" >
  <Grid x:Name="LayoutRoot" Background="Lightgray">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Vertical">
      <!-- Sunken -->
      <Grid Width="100" Height="25" Background="Wheat" Margin="0,5,0,0">
        <!-- Draw the 3d border -->
        <Rectangle Height="1" Fill="DarkGray" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
        <Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
        <Rectangle Height="1" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
        <Rectangle Width="1" Fill="White" HorizontalAlignment="Right" VerticalAlignment="Stretch" />

        <!-- Put your content in this Grid -->
        <Grid>
          <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Sunken" />
        </Grid>
      </Grid>

      <!-- Raised -->
      <Grid Width="100" Height="25" Background="Wheat" Margin="0,5,0,0">
        <!-- Draw the 3d border -->
        <Rectangle Height="1" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
        <Rectangle Width="1" Fill="White" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
        <Rectangle Height="1" Fill="DarkGray" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
        <Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Right" VerticalAlignment="Stretch" />

        <!-- Put your content in this Grid -->
        <Grid>
          <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Raised" />
        </Grid>
      </Grid>
    </StackPanel>
  </Grid>
</UserControl>