Telerik Silverlight Demo

8 posts, 2 answers
  1. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 02 Mar 2010 Link to this post

     

    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
  2. Answer
    Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 02 Mar 2010 Link to this post

    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
  3. DevCraft banner
  4. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 02 Mar 2010 Link to this post

    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
  5. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 02 Mar 2010 Link to this post

    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.


  6. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 03 Mar 2010 Link to this post

    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
  7. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 03 Mar 2010 Link to this post

    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!
  8. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 03 Mar 2010 Link to this post

    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
  9. Answer
    Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 03 Mar 2010 Link to this post

    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.
Back to Top
DevCraft banner