Carousel of Buttons

2 posts, 0 answers
  1. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 02 Dec 2009 Link to this post

    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>

     

     

  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 04 Dec 2009 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top