views:

585

answers:

1

Hi 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?

Any ideas would be really helpful :)

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>
A: 

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.

Sorskoot
judi
You have to look in the Project panel in Blend for the HTML or ASPX file that is used when you run your application. When you view your control in the browser this page is shown in the address bar of your browser. In a new project both are set to 100% by default.
Sorskoot
Thanks but I can't see any html or aspx files. Their all xaml and dll files. I'm not sure where this file comes from either http://localhost:49712/TestPage.html
judi
In this case the file is generated when you build the project. This is common in test projects or when you do not mind about the html files. When you create a "silverlight application + website" in expression blend, a web-project is created also. This is where you have full control over the html.
Sorskoot
<Grid x:Name="LayoutRoot"> <Rectangle OpacityMask="White" Margin="0,130,0,0" Fill="White" Width="auto"/> <Rectangle Stroke="#FF87AEB8" Height="300" Margin="0,138,0,0" VerticalAlignment="Top" Width="auto" > <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,0.953" StartPoint="0.5,0.01"> <GradientStop Color="White" Offset="0.03"/> <GradientStop Color="#FFB2DBE5" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
judi
Sorry I don't understand. Thanks so much for your help. I have created a project and have tried your background fill, but how do I set the background fill to have a height. I want 2 background gradients in the header?
judi
Yippee I've managed to get the gradient background to work by putting it in another grid. But the width is still stuck at 1000px? :(
judi
Can you add what you've got so far to your question? I'll update my answer then, so others can benifit from it.
Sorskoot
Thanks Sorskoot I've updated
judi
Could this be interfering with my width?<UserControl 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" x:Class="Swinton_CommercialScreens.Screen_2">
judi