locked
How to design/implement carousel control on the MainPage.xaml in Navigation type project. RRS feed

  • Question

  • I'm using a Silverlight Navigation (JetPack Theme) solution and upon discovering this Carousel control , I thought 5 views of my User Interface would be helpful to see upon launching the website.  Given the xaml below for MainPage.xaml - what follows is the xaml for the carousel control. Is it possible to combine into one page?  If not, how would I accomplish this? As a separate UserControl which could be included in some portion of the xaml on the MainPage.xaml file? Thank you for any ideas. Greg

    <UserControl
        x:Class="Silverlight4JetPackTheme.MainPage"
        xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
        xmlns:db="clr-namespace:Codeplex.Dashboarding;assembly=Codeplex.Dashboarding"
        xmlns:controls="clr-namespace:Silverlight4JetPackTheme.Controls" 
        d:DesignWidth="1472" d:DesignHeight="300">
    
        <Grid>
          <controls:TiledBackground SourceUri="/Silverlight4JetPackTheme;component/Images/backgroundtexture.png" />
          <Image Source="/Silverlight4JetPackTheme;component/Images/backgroundshadow.png" Stretch="Fill" />
    
          <Border x:Name="BackgroundBorder" Style="{StaticResource BackgroundBorderStyle}">
            </Border>
            <Border x:Name="LinksBorder" Style="{StaticResource NavLinksBorderStyle}" />
    
          <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
                <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">
              <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="Home" TargetName="ContentFrame" Content="Home" />
                    <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="LED" TargetName="ContentFrame" Content="MicroGrid" />
                    <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="Lumens" TargetName="ContentFrame" Content="Lumen Level"/>
            </StackPanel>
    
            <Border x:Name="BrandingBorder" Style="{StaticResource NavBrandingBorderStyle}" Grid.Row="1">
              <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource NavBrandingStackPanelStyle}">
                  <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="Hazz Energy Solutions" />
                  <ContentControl Style="{StaticResource NavLogoIcon}" VerticalAlignment="Bottom" Content="microgrid dashboard" />
              </StackPanel>
            </Border>
    
            <Border x:Name="ContentBorder" Style="{StaticResource NavContentBorderStyle}" Grid.Row="2">
              <navigation:Frame x:Name="ContentFrame" Style="{StaticResource NavContentFrameStyle}" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" />
            </Border>
    
            </Grid>
          
        </Grid>
    </UserControl>
    

    ***********************  and now the carousel xaml *********************************

    <UserControl x:Class="ControlTest.Page"
        xmlns:display="clr-namespace:Cokkiy.Display;assembly=Cokkiy.Display.Carousel"             
        Width="800" Height="600">
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <display:Carousel x:Name="carousel" TurnDirection="Counterclockwise" Padding="5,5,5,5" >
                <display:Carousel.Background>
                    <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                        <GradientStop Color="#FF000000"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </display:Carousel.Background>
                <display:Carousel.ItemSources>
                    <display:ItemSource Title="01" ImageSource="Images/Image1.jpg"/>
                    <display:ItemSource Title="02" ImageSource="Images/Image2.jpg"/>
                    <display:ItemSource Title="03" ImageSource="Images/Image3.jpg"/>
                    <display:ItemSource Title="04" ImageSource="Images/Image4.jpg"/>
                    <display:ItemSource Title="05" ImageSource="Images/Image5.jpg"/>
                </display:Carousel.ItemSources>
            </display:Carousel>
    
            <StackPanel HorizontalAlignment="Center" Grid.Row="1" Orientation="Horizontal">
                <Button Margin="5,5,5,5" Click="turnLeftButton_Click" x:Name="turnLeftButton" Content="One step(CounterClockwise)"/>   
                <Button Margin="5,5,5,5" Click="turnRightButton_Click" x:Name="turnRightButton" Content="One step(Clockwise)"/>
                <CheckBox Margin="5,5,5,5" IsChecked="True" Unchecked="autoTurnningButton_Unchecked" Checked="autoTurnningButton_Checked" x:Name="autoTurnningButton" Content="Auto Turnning"/>
            </StackPanel>
            <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5,5,5,5" Click="toClockwiseButton_Click" x:Name="toClockwiseButton" Content="Turnning Clockwise"/>
                <Button Margin="5,5,5,5" Click="toCounterClockwiseButton_Click" x:Name="toCounterClockwiseButton" Content="Turnning CounterClockwise"/>
                <TextBox Margin="5,5,5,5" Width="30" x:Name="durationTextBox"/>
                <Button Margin="5,5,5,5" Click="applyDurationButton_Click" x:Name="applyDurationButton" Content="Apply Duration"/>
            </StackPanel>
            <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="5,5,5,5" x:Name="dynamicAddContent" Click="dynamicAddContent_Click" Content="Dynamic Add an Image"/>
                <Button Margin="5,5,5,5" x:Name="dynamicRemoveButton" Click="dynamicRemoveButton_Click" Content="Remove an Image"/>
            </StackPanel>
        </Grid>
    </UserControl>
    



     

    Sunday, July 3, 2011 7:09 PM

Answers

All replies