Question

I'm using the new microsoft expression. I'm trying to create a repeating header much like this one at http://csstreacle.artygirl.co.uk/. Is there a way I can do this in Expression blend. How do I organize the containers? And how do I set it to repeat in code or manually?

I have a rectangle with a gradient on it. How do I get it to expand to fill the screen width for any browser/ computer screen size? I would usually do this with a 1px image in css but understand that xaml is a bit different.

Rather than a background this needs to be a two tiered background for the header. The rest of the website will be white!

Thanks Judi

Check out this I've managed the background but the width is on auto 1000. Any ideas how to set it to auto or 100%?

        <Grid Height="139" VerticalAlignment="Top" >
  <Grid.Background>
    <LinearGradientBrush EndPoint="0.5,0.953" StartPoint="0.5,0.01">
                <GradientStop Color="#FF1E5584"/>
                <GradientStop Color="#FF003265" Offset="1"/>
            </LinearGradientBrush>
  </Grid.Background>
</Grid>
Was it helpful?

Solution

First, you have to make sure the silverlight control in your HTML page has a width and heigth of 100%. This makes sure the control will span you entire page. This is a the same a you would do with a normal page using a div or something.

In xaml. Remove the default width and height from the control header part (where the xmlns are defined). your xaml will look something like:

<UserControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="test0001.MainPage">
  <Grid x:Name="LayoutRoot">
    <Grid.Background>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Black" Offset="1"/>
        <GradientStop Color="White" Offset="0"/>
      </LinearGradientBrush>
    </Grid.Background>
  </Grid>
</UserControl>

update:

Make sure you do not set the width on any containers like grids or canvasses. I think you have set the width to 1000 somewhere... Try setting it to * or removeing the whole width attribute.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top