Hiding the Border and Background when using RadCarousel

9 posts, 0 answers
  1. Weston Johnson
    Weston Johnson avatar
    1 posts
    Member since:
    Jul 2009

    Posted 17 Aug 2009 Link to this post

    How do I hide the RadCarousel Border and Black Background?   I only want my DataTemplate below to show without the default border and background. The radcarousel keeps encompassing the DataTemplate inside of a Semi-Transparent border and black background.   I have set the border thickness to 0 and background to transparent and it will not go away. What do I do? 

    I have the following Resource defined within a grid:
    <Grid.Resources>
                <DataTemplate DataType="{x:Type local:Locations}" >
                    <Border Padding="1" Height="166" Width="217" BorderThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="2" RenderTransformOrigin="0.5,0.5" ClipToBounds="True">
                     <Border.RenderTransform>
                      <TransformGroup>
                       <ScaleTransform ScaleX="1"/>
                       <SkewTransform/>
                       <RotateTransform/>
                       <TranslateTransform/>
                      </TransformGroup>
                     </Border.RenderTransform>
                     <Border.Background>
                      <SolidColorBrush Opacity="0.435" Color="Transparent"/>
                     </Border.Background>
                        <Grid Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" Width="215" Height="160" Margin="0" Opacity="0.995" ClipToBounds="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1" />   
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1" />
                            </Grid.RowDefinitions>
          <!--    -->
          <Canvas Grid.Column="0" Grid.Row="0" Width="214.943" Height="161.468" RenderTransformOrigin="0.5,0.5" Margin="0,0,-213.943,-160.468">
            <Path Fill="#FFFFFFFF" Stretch="Fill" Width="214.943" Height="161.468" Opacity="0.14999400079250336"
            Data="F1M875.2334,354.4902C875.2334,356.6902,873.4334,358.4902,871.2334,358.4902L664.2904,358.4902C662.0894,358.4902,660.2904,356.6902,660.2904,354.4902L660.2904,201.0222C660.2904,198.8222,662.0894,197.0222,664.2904,197.0222L871.2334,197.0222C873.4334,197.0222,875.2334,198.8222,875.2334,201.0222z"/>
                        <Canvas  Width="203.781" Height="124.436" Canvas.Left="5.883" Canvas.Top="31.063">
                         <Path Fill="#FF000000" Stretch="Fill" Stroke="#FF4D4D4D" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" StrokeStartLineCap="Flat" StrokeThickness="1" Width="203.781" Height="124.436" Data="M869.4541,349.0215C869.4541,350.6715,868.1041,352.0215,866.4541,352.0215L669.6731,352.0215C668.0221,352.0215,666.6731,350.6715,666.6731,349.0215L666.6731,231.5855C666.6731,229.9365,668.0221,228.5855,669.6731,228.5855L866.4541,228.5855C868.1041,228.5855,869.4541,229.9365,869.4541,231.5855L869.4541,349.0215z"/>
                        </Canvas>
                        <TextBlock Width="200" Height="20" Canvas.Left="8" FontFamily="Myriad Pro" FontSize="17.333" Text="{Binding Path=LocationName}" TextWrapping="Wrap" Canvas.Top="-1"/>
                        <TextBlock Width="200" Height="15" Canvas.Left="8" FontFamily="Myriad Pro" FontSize="12" Text="{Binding Path=LocationFullAddress}" TextWrapping="Wrap" Canvas.Top="18"/>
                        <Image Canvas.Left="10" Canvas.Top="33" Source="{Binding Path=LocationImage}"  Width="198" Height="125.468"/>
                        
           </Canvas>
          <!--    -->
          
         </Grid>
                    </Border>
                </DataTemplate>
            </Grid.Resources>

     <telerik:RadCarousel x:Name="LocationCarousel" AutoGenerateDataPresenters="false"
      HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
      SelectionChanged="LocationCarousel_SelectionChanged" />
  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 19 Aug 2009 Link to this post

    Hi Weston Johnson,

    The default border and background that you see are part of the default style of CarouselItem control. To override the default style you just have to create a very simple custom style for CarouselItem.

    <Style TargetType="telerik:CarouselItem">  
        <Setter Property="Template">  
            <Setter.Value> 
                <ControlTemplate TargetType="telerik:CarouselItem">  
                    <ContentPresenter/> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 

    Hope this helps.

    All the best,
    Milan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Brian
    Brian avatar
    2 posts
    Member since:
    Aug 2010

    Posted 02 Sep 2010 Link to this post

    How would you flatten the carousel so that the path is just a line. Is there a property for this or would I have to define my own path.
  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 03 Sep 2010 Link to this post

    Hi Brian,

    I am attaching a project that demonstrates how a horizontal path can be used.


    Sincerely yours,
    Milan
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Brian
    Brian avatar
    2 posts
    Member since:
    Aug 2010

    Posted 03 Sep 2010 Link to this post

    Thanks!
  7. Vance Smith
    Vance Smith avatar
    36 posts
    Member since:
    Jun 2012

    Posted 11 Mar 2011 Link to this post

    Hi,

    How would apply the style to the radcarousel? I also dont want a background or a border.

    Thanks,

    Vance
  8. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 11 Mar 2011 Link to this post

    Hi Vance Smith,

    May you verify whether the approach with creating a style for CarouselItem is not working in your application ? 

    Kind regards,
    Maya
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  9. Arnaud
    Arnaud avatar
    17 posts
    Member since:
    Mar 2013

    Posted 14 Aug 2014 in reply to Milan Link to this post

    Hello,

    With this item template you can't click inside the border to move to a new item. How can I defined a new template that keeps this feature ?

    Arnaud.
  10. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 15 Aug 2014 Link to this post

    Hello Arnaud,


    Thank you for contacting us. 

    You should write custom Trigger, where to define the appearance of the selected CarouselItem for this custom template. Please check the snippet below:

      <LinearGradientBrush x:Key="Carousel_ItemBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFCE79F" Offset="1"/>
            <GradientStop Color="#FFFDD3A8"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="Carousel_ItemInnerBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF282828"/>
            <GradientStop Color="#FF5F5F5F" Offset="1"/>
        </LinearGradientBrush>
            <Style TargetType="telerik:CarouselItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:CarouselItem">
                    <Border x:Name="CarouselItemBackground">
                        <ContentPresenter/>
                    </Border>
                     <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="CarouselItemBackground" Property="Background" Value="{StaticResource Carousel_ItemBackground_Selected}"/>
                    <Setter TargetName="CarouselItemBackground" Property="BorderBrush" Value="{StaticResource Carousel_ItemInnerBorder_Selected}"/>
                </Trigger>
            </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    Hope this helps. 

     
    Regards,
    Vanya Pavlova
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready