Templating/styling of grids

10-30-2009 7:25 AM |

 Hey guys

Rookie at SL here. Im starting to look at templating and styling to make a more reusable design. Styling is going along just fine but im having problems templating bigger chunks of design. I tried looking at the Diggs Sample but it seems the templating there only works on buttons. Something which seems to be quite normal in tutorials on the net (they all revolve around buttons)

  I have the following grid which with some retangles gets a nice round, glasslike appearance with a shadow.

1    <Grid Width="355" Height="65" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="15,15,0,0">
2                <Rectangle RadiusX="10" RadiusY="10" Fill="#22000000" Margin="0,4,0,0" />
3                <Rectangle Stroke="Gray"  RadiusX="10" RadiusY="10" Fill="#7700A303" Margin="0,0,0,6" />
4                <Rectangle Fill="#FFFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,15"  />
5                <StackPanel Canvas.Left="20" Canvas.Top="14" Margin="20,14,10,0">
6                    <TextBlock x:Name="TitleTextBlock" 
7                        HorizontalAlignment="Left" VerticalAlignment="Center" Text="SilverRoute" TextWrapping="Wrap" FontWeight="Bold" />
8                    <TextBlock x:Name="DescriptorTextBlock" 
9                        HorizontalAlignment="Left" VerticalAlignment="Center" Text="Løberute planlægningsværktøj" TextWrapping="Wrap" FontWeight="Bold" />
10               </StackPanel>
11           </Grid>

  I have successfully moved the styling of the rectangles into each of their own style. But what i really want to do is make a Grid template in which i can put panels (like the stackpanel here) and it will just surround it with the design effect.

i tried making the following style combined with a template based on the diggs sample

1           <Style x:Key="StyllishGrid" TargetType="Grid">
2                <Setter Property="Template">
3                    <Setter.Value>
4                        <ControlTemplate>
5                            <Rectangle RadiusX="10" RadiusY="10" Fill="#22000000" Margin="0,4,0,0" />
6                            <Rectangle Stroke="Gray"  RadiusX="10" RadiusY="10" Fill="#7700A303" Margin="0,0,0,6" />
7                            <Rectangle Fill="#FFFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,15"  />
8                        </ControlTemplate>
9                    </Setter.Value>
10               </Setter
11           

 But with zero success.

What is the aproach here? Theres a striking absense of tutorials on this subject :)

Re: Templating/styling of grids

10-30-2009 7:30 AM |

 hai fiss,

    I have not understand ur question, i Think u want shadow effect this the code..

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid .Effect>
                                    <DropShadowEffect/>
                                </Grid .Effect>

-----here u can add ur control-------

</Grid>

Re: Re: Templating/styling of grids

10-30-2009 7:39 AM |

 Im not sure i can be any more specific in  detailing the problem.

 It has nothing to do with adding a shadow effect. 

Im trying to add elements to a style i can use several places. Something which seems to only work for elements like a button. Not a grid.

Re: Re: Re: Templating/styling of grids

10-30-2009 7:56 AM |

 I think u want to add style for controls, i am right

Style="{StaticResource InPlaceEditTextBox}"

try this

Re: Templating/styling of grids

10-31-2009 12:12 PM |

What you are trying, with the Grid, isn't really going to work.  When you create a template, you are creating a new look (and sometimes feel) of an existing control.  The Grid has no look (basically) and your template isn't changing anything, it is creating something new.  It seems more like that you want to create a custom control or a user control.  Either of which creates a reusable control (or set of controls) with a specific look and feel.  Just take your first sample (the Grid with the Rectangles) and put it inside a UserControl.  Then you can reuse that as often as you need/want to.