Hiding the Border and Background when using RadCarousel

[Weston Johnson]

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" />

[Milan]

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.

[Brian]

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.

[Milan]

Hi Brian,

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

Sincerely yours,
Milan
the Telerik team

[Brian]

Thanks!

[Vance Smith]

Hi,

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

Thanks,

Vance

[Maya]

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

[Arnaud]

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.

[Vanya Pavlova]

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

 

 

[Mark]

 

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]

[Dinko | Tech Support Engineer]

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