Carousel of Buttons

[Jon]

Hi..
Any ideas how I can create a cool carousel of buttons (i.e. a Menu)
I have 10 buttons like this... thanks in advance

 

 

<telerik:RadButton Height="43" Margin="13.015,18,0,0" BorderThickness="1" BorderBrush="Blue" Name="btnMenu" VerticalAlignment="Top" FontSize="20" ClickMode="Press" Click="btnMenu1_Click" HorizontalAlignment="Left" Width="217">

 

 

 

<telerik:RadButton.Effect>

 

 

 

<DropShadowEffect ShadowDepth="5" />

 

 

 

</telerik:RadButton.Effect>

 

 

 

<StackPanel Orientation="Horizontal" Height="32" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="148.687">

 

 

 

<Image Source="/icons/truck_blue.png" Height="32" Width="32" />

 

 

 

<TextBlock Text="Menu Option1" Foreground="Navy" FontSize="18" Margin="9 0 0 0" />

 

 

 

</StackPanel>

 

 

 

</telerik:RadButton>

 

 

[Milan]

Hello Jon The Nerd,

Here is how you can create a carousel panel filled with 10 button elements:

<Grid>
    <Grid.Resources>
        <Style x:Key="MyCutomButtonStyle" TargetType="telerik:RadButton">
            <Setter Property="Height" Value="43"/>
            <Setter Property="Width" Value="217"/>
            <Setter Property="Margin" Value="13.015,18,0,0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Blue"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="ClickMode" Value="Press"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="5" />
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <ScrollViewer CanContentScroll="True">
        <telerik:RadCarouselPanel ItemsPerPage="3">
            <telerik:RadButton Name="btnMenu1" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu2" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu3" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu4" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu5" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu6" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu7" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu8" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu9" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
            <telerik:RadButton Name="btnMenu10" Click="btnMenu1_Click" Style="{StaticResource MyCutomButtonStyle}"/>
        </telerik:RadCarouselPanel>
    </ScrollViewer>
</Grid>

You could also move all shared button properties to a style and use this style for all buttons.

Hope this helps.

Best wishes,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.