This is a migrated thread and some comments may be shown as answers.

Hiding the Border and Background when using RadCarousel

10 Answers 168 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Weston Johnson
Top achievements
Rank 1
Weston Johnson asked on 17 Aug 2009, 07:15 AM
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" />

10 Answers, 1 is accepted

Sort by
0
Milan
Telerik team
answered on 19 Aug 2009, 09:20 AM
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.
0
Brian
Top achievements
Rank 1
answered on 02 Sep 2010, 05:34 PM
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.
0
Milan
Telerik team
answered on 03 Sep 2010, 07:24 AM
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
0
Brian
Top achievements
Rank 1
answered on 03 Sep 2010, 04:04 PM
Thanks!
0
Vance Smith
Top achievements
Rank 1
answered on 11 Mar 2011, 09:21 AM
Hi,

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

Thanks,

Vance
0
Maya
Telerik team
answered on 11 Mar 2011, 03:22 PM
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!
0
Arnaud
Top achievements
Rank 1
answered on 14 Aug 2014, 09:17 AM
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.
0
Vanya Pavlova
Telerik team
answered on 15 Aug 2014, 10:18 AM
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.
 
0
Mark
Top achievements
Rank 1
answered on 23 Nov 2018, 10:52 PM

 

How would you do this in c#?

[quote]Milan said:

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> 
 
[/quote]
0
Dinko
Telerik team
answered on 28 Nov 2018, 09:43 AM
Hello Mark,

You can check the following code snippet which creates the mentioned style in your post in code behind. Keep in mind that you need to add the style in the Loaded event of the Window in order the style to apply.
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
    Style style = new Style() { TargetType = typeof(CarouselItem) };
 
    ControlTemplate template = new ControlTemplate(typeof(CarouselItem));
    FrameworkElementFactory elemFactory = new FrameworkElementFactory(typeof(ContentPresenter));
    template.VisualTree = elemFactory;
 
    style.Setters.Add(new Setter(CarouselItem.TemplateProperty, template));
    style.Setters.Add(new Setter(CarouselItem.BackgroundProperty, Brushes.Red));
    this.Resources.Add(typeof(CarouselItem), style);
}

Regards,
Dinko
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Carousel
Asked by
Weston Johnson
Top achievements
Rank 1
Answers by
Milan
Telerik team
Brian
Top achievements
Rank 1
Vance Smith
Top achievements
Rank 1
Maya
Telerik team
Arnaud
Top achievements
Rank 1
Vanya Pavlova
Telerik team
Mark
Top achievements
Rank 1
Dinko
Telerik team
Share this question
or