Telerik Silverlight Demo

[John]

 

Hi,

I'm currently building a controls library demo site for my company.  I really like the silverlight demo that Telerik has.  I have already implemented the transition effects.  What i'm curious about is the background image for the overall page.  It appears to be an image that auto scales with the browser window.  Can you tell me what that is?  Are you building an image using xaml somehow or is that one big image and you have figured out a way to have it scale?

Thanks

John Keath

[Ben Hayat]

John, in may case I use jpg file as my background image and I usually set the opacity to 50% - 75% and set "Stretch=fill" and set the background color of the page to black. The image should be the first element you put on your page. Here is a sample image you can test to see how it works

[John]

Ben,

When I try this I set the background image to black and when I run it I see my background as black, not the jpg you provided.  Here is my code.

 

 <Common:NavigationPage.Resources>
        <DataTemplate x:Key="RadPanelBarItemTemplate">
            <!--<telerikNavigation:RadPanelBarItem  >
                <telerikNavigation:RadPanelBarItem.Header>-->
                    <StackPanel Orientation="Horizontal" Margin="2">
                        <Image Source="{Binding Image}"></Image>
                        <TextBlock Text="{Binding Name}" Width="100" />
                    </StackPanel>
                <!--</telerikNavigation:RadPanelBarItem.Header>
            </telerikNavigation:RadPanelBarItem>-->
            <!--<StackPanel Orientation="Horizontal" Margin="5">
                <Image Source="{Binding Image}"></Image>
                <TextBlock Text="{Binding Name}" Width="150" />
            </StackPanel>-->
        </DataTemplate>
    </Common:NavigationPage.Resources>
    <Grid x:Name="LayoutRoot">
    <Image Source="/Images/wallpaper.jpg" Opacity="0.5" Stretch="Fill"></Image>
        <Grid Margin="10 10 10 10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="400" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border Background="Blue" BorderBrush="AntiqueWhite" BorderThickness="1" CornerRadius="5" Margin="10 10 10 10" >
                <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <StackPanel Margin="6 6 6 6">
                    <telerikNavigation:RadPanelBar x:Name="MainBar" ItemsSource="{Binding Controls}" ItemTemplate="{StaticResource RadPanelBarItemTemplate}" >
                    </telerikNavigation:RadPanelBar>
                </StackPanel>
                </ScrollViewer>
            </Border>
            <Border  Grid.Column="1" CornerRadius="5" Margin="10 10 10 10">
                <telerik:RadFrameContainer SizeChanged="FrameFill_SizeChanged" x:Name="frameContainer"/>
            </Border>
        </Grid>
    </Grid>
</Common:NavigationPage>

John

[Ben Hayat]

John, I just took your grid and added a border, and text to it and here is the code. You set background of the Layoutroot to black and not the image

    <Grid x:Name="LayoutRoot" Background="Black">
        <Image Source="Wallpaper.jpg" Opacity="0.75" Stretch="Fill"></Image>
        <Grid Margin="10 10 10 10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="400" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300" CornerRadius="20" Background="#FF2A2A2A" Opacity="0.4"/>
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Hello!" TextWrapping="Wrap" Grid.Column="1" FontSize="64" Foreground="#33FF0000" FontFamily="Arial Black"/>
        </Grid>
    </Grid>

And here is the screen shot.

[John]

Ben,

I took your code and copied and pasted it and it doesn't work once you run it.  What I mean is even mine was working inside of expression blend.  I would put the image in and in the expression blend environment it looked great.  The problem is once you run it in the browser it no longer works.  I just get  black background.  Are you actually running yours in a browser and seeing it work?

John

[Ben Hayat]

Yes John I took the ScreenShot from browser. Here are two screenshots from browser and Blend.

Are you testing my code with your app or as stand alone? Try stand alone first, to see if something is overwriting it in your code
Hope this helps!

[John]

Ben,

Thanks for your patience.  It turns out that "Im an Idiot".  I had my image path as "/Image/someimage.png" in stead of "Image/someimage.png".  It now works.

Thanks.

John

[Ben Hayat]

It turns out that "Im an Idiot". 

Hey join the club :-) That happens to the best of us. Now, back to the original question. Once you have the background image, then you can place controls on it and play with transparency and have some of the background come through and you can create real neat effects. In fact you have two or more background images with transparencies and they all become mixed and creates interesting background.