Question

How do I add .CS functionality to XAML classes built in Expression Design?

I have a Silverlight project handed to me by designers that does not seem to have much functionalty to it yet. One of the first things I have noticed is that there does not seem to be any corresponding .cs files that match up with what appears to be children of the “LayoutRoot”. I mean, as it appears in Expression Blend, these are child nodes in the “Objects and Timeline Tab” under “LayoutRoot”.

When viewed in Visual Studio 8, they appear to be children nodes of of the Page.xaml class. Shouldn’t the first step be that I generate some .cs files or class to handle the functionality of these grids? I did a search on the name of the first child grid and I did not get any results in any of the existing .cs files. How do I generate .cs files?

Answer 1

The Grid is commonly used as a container control for the entire page. You normally don’t deal with it directly. If you have controls in the grid, you deal with those controls. Give them names(ie.. x:Name=”someName”), then deal with the events for those controls. It’s almost exactly like WinForms in regards to controls and dealing with events.

For example, here is some XAML from a WPF project(I know it’s not Silverlight but basically the same)

  <Grid x:Name="LayoutRoot">
     <Canvas 
          x:Name="canvas1" 
          Height="100" 
          HorizontalAlignment="Left" 
          Margin="116,62,0,0" 
          VerticalAlignment="Top" 
          Width="200">

      </Canvas>

      <Button 
          x:Name="btnGetChildren" 
          Content="Get Children" 
          Height="23" 
          Margin="174,209,218,47" 
          Width="75" 
          Click="btnGetChildren_Click" />
  </Grid>

Notice that I have a Canvas and a Button “inside” the Grid. Notice that the button has a Click event that I am handling. The code for that click event is in the “xaml.cs” file for the page.

private void btnGetChildren_Click(object sender, RoutedEventArgs e)
{
    foreach (UIElement element in canvas1.Children)
    {
        // some code
    }
}