Telerik Forums
UI for WPF Forum
0 answers
94 views
The carousel is great but when I use the mouse wheel it scrolls too fast.  Is there a way to slow that down?  I tried using the `ScrollingSettingsBehavior` but none of the settings in that behavior seemed to have any effect.
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
 asked on 15 Jun 2023
1 answer
41 views

If I have subscribed to the RadCarouselPanel.SelectedIsTopItem event, should I not get notifications when that property changes to false?

In my case, when the user scrolls the mouse wheel over the control or hits the little left/right buttons at the bottom of the carousel, the selected item certainly moves off of the top.  But the event is never fired.  It is only fired when I left click on the item to make the control force it to the top.


To illustrate, here is how I find the panel and subscribe to the events

var panel = this.Carousel.FindChildByType<RadCarouselPanel>();
panel.IsAnimatingChanged += Panel_IsAnimatingChanged;
panel.SelectedIsTopItem += Panel_SelectedIsTopItem;


I then have debug log lines in the two handler functions to let me know when the events fire.

private void Panel_SelectedIsTopItem(object sender, RoutedEventArgs e)
{
    var panel = (RadCarouselPanel)sender;
    Log.Debug($"Panel SelectedIsTopItem changed to {panel.IsSelectedTopItem}");
}

private void Panel_IsAnimatingChanged(object sender, RoutedEventArgs e)
{
    var panel = (RadCarouselPanel)sender;
    Log.Debug($"Panel is animating changed to {panel.IsAnimating}");
}

When I bring up my display the selected item is at the top by default







Then I use the mouse wheel or the scroll buttons to move the panel items without changing the selected item.  Note that the blue "selected" rectangle still appears around #002 to the left even though it is not #003 that is topmost





But all I get in my log is IsAnimatingChanged events 

15:31:50.690 [  1] DEBUG - Panel_IsAnimatingChanged: Panel is animating changed to True
15:31:50.977 [  1] DEBUG - Panel_IsAnimatingChanged: Panel is animating changed to False


But now if I  left-click the new topmost item (#003), then it becomes selected




and I am notified that SelectedIsTopMost has changed, along with an event about IsAnimating changed even though no animation occurs in this instance

15:36:16.447 [  1] DEBUG - Panel_IsAnimatingChanged: Panel is animating changed to True
15:36:16.725 [  1] DEBUG - Panel_SelectedIsTopItem: Panel SelectedIsTopItem changed to True
15:36:16.730 [  1] DEBUG - Panel_IsAnimatingChanged: Panel is animating changed to False


In order for the event SelectedIsTopMost to be useful to me, I have to be notified about it when it becomes false.   Why am I not being told this?


For sake of completeness, here is my XAML



<tk:RadCarousel x:Name="Carousel"
    Padding="0" Margin="0"
    Grid.Row="1"
    ItemsSource="{Binding ScansView}"
    VerticalContentAlignment="Top"
    IsVisibleChanged="Carousel_OnIsVisibleChanged"
    HorizontalAlignment="{Binding HorizontalAlignment}" VerticalAlignment="{Binding VerticalAlignment}"
    >

 

Vladimir Stoyanov
Telerik team
 answered on 10 May 2023
1 answer
43 views
I am attempting to get a reference to the RadCarouselPanel in my RadCarousel.  I need to know when it is animating.  But unless I wait for some sort of manual event (like a keyboard press)  the panel is null.

First I tried adding a handler for the Carousel's Loaded event 


<tk:RadCarousel x:Name="OtherScanGallery"

    ItemsSource="{Binding OtherScansView}"
    VerticalContentAlignment="Top"
    IsSynchronizedWithCurrentItem="True"
    IsVisibleChanged="OtherScanGallery_OnIsVisibleChanged"
    SelectionChanged="OtherScanGallery_OnSelectionChanged"
    Loaded="OtherScanGallery_OnLoaded"
    SelectedItem="{Binding ElementName=Root, Path=DataContext.SelectedOtherScan, Mode=TwoWay}"
    >

private void OtherScanGallery_OnLoaded(object sender, RoutedEventArgs e) {

RadCarouselPanel? panel = null;

if (sender is not RadCarousel car) Log.Debug($"Gallery loaded but no carousel"); elseif (null == (panel = car.FindCarouselPanel())) Log.Debug($"Gallery loaded but no panel"); else Log.Debug($"Gallery fully loaded"); }


Unfortunately the second check fails here.  FindCarouselPanel returns null.    I guess this makes some sense since the carousel is initially not visible when my page is loaded.    So I figured, maybe the carousel waits until it becomes visible to create it's panel

So then I tried to put in a handler for the carousel's IsVisibleChanged event.  I figure the carousel will have to have created the panel by then, right? 

private void OtherScanGallery_OnIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    var panel = OtherScanGallery.FindCarouselPanel();
    if (null == panel )
        Log.Error("No panel after visible changed.");
}


But no, wrong.  The Panel returned here is still null

However If i then set up an event handler for... say... a keyboard event later on, at that point FindCarouselPanel returns a valid panel.

So what are the rules here?  How do I determine definitively when the Carousel creates its panel?


Note:  I am using The Windows8Touch theme in the binaries with XAML and the StyleManager.  I have not created an sort of ControlTemplate for the carousel or its items.  I am using the theme-provided ones



Martin Ivanov
Telerik team
 answered on 19 Apr 2023
1 answer
68 views

Hello,

In my WPF application I want to integrate a page indicator, like everybody knows from mobile devices, to browse/slide through e.g. some images or pages/controls and the dots at the bottom indicating the current position.

I saw that Telerik provides something like that for Xamarin (SlideView: https://docs.telerik.com/devtools/xamarin/controls/slideview/slideview-overview). 

Is there something similar for WPF I just don't see? Or any suggestion how I can realize this easily (e.g. with bit of restyling of another control)? Or maybe is it possible to host Xamarin control in WPF?

 

Thanks

Martin Ivanov
Telerik team
 answered on 09 Nov 2021
1 answer
88 views

I'm trying to spread out the items in my carousel so there is a bit of space between them (and ideally no change in z depth as they animate).

It seems like the items can only spread out to the edges of the screen. In my case I need 3 landscape images visible at once.

Instead of overlapping 3 images on screen like |[--][--][--]| where the center image is raised/focused, I'd like [-|-][--][-|-] where the side images are the same size and partially off screen.

I've tried the following, as well as using bezier curves with control points, etc.

<Path x:Key="horizontalPath" Stretch="Fill">
  <Path.Data>
     <LineGeometry StartPoint="-1000,0" EndPoint="1000,0" />
  </Path.Data>
</Path>

 

 

Vladimir Stoyanov
Telerik team
 answered on 01 Apr 2021
1 answer
87 views

Newbie attempting to use the Carousel control.  The defaults of the control work fine for my needs, but I want to change the number of panels in the control.  I only have 3 items that I want to use in the carousel, which are images.  However, by default the carousel has 5 or 6 panels.  I only want 3 panels for my 3 images in the carousel.  How do I change the number of panels in the carousel?

 

 

Dilyan Traykov
Telerik team
 answered on 16 Mar 2021
4 answers
57 views

Hi Telerik,

 

I'mu using a RadCarousel with a style applied to all Carousel Items. Sometimes, and randomly, the picture in the Carousel Item disappears (the border or the overlay are still present).

 

My Carousel :

<telerik:RadCarousel Grid.Column="1" x:Name="InspectionCarousel" ItemsSource="{Binding TabDiagramsForActiveInspection}" AutoGenerateDataPresenters="False"
                     Background="Transparent" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" SelectedItem="{Binding SelectedItem}">
    <telerik:RadCarousel.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadCarouselPanel Path="{StaticResource horizontalPath}"/>
        </ItemsPanelTemplate>
    </telerik:RadCarousel.ItemsPanel>
</telerik:RadCarousel>

 

My Carousel Item Style :

<Style TargetType="telerik:CarouselItem">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Height" Value="{Binding Path=ActualHeight, ElementName=InspectionCarousel, Converter={conv:PercentageConverter}, ConverterParameter='0,9'}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:CarouselItem">
                <Grid>
                    <Border BorderThickness="5" CornerRadius="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Image Source="{Binding TabDiagram.DiagramAsImage.SerializedImage, Converter={StaticResource ImageConverter}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
 
                            <Grid>
                                <Grid.Style>
                                    <Style TargetType="Grid">
                                        <Setter Property="Visibility" Value="Collapsed"/>
 
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.NA}">
                                                <Setter Property="Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Grid.Style>
 
                                <Grid Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.6"/>
                                <TextBlock Text="N/A" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="68" FontWeight="SemiBold"/>
                            </Grid>
                        </Grid>
 
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="BorderBrush" Value="Black"/>
 
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.ToBeDone}">
                                        <Setter Property="BorderBrush" Value="Black"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.OK}">
                                        <Setter Property="BorderBrush" Value="Green"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.KO}">
                                        <Setter Property="BorderBrush" Value="Red"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.NA}">
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

Details :

- TabDiagram.DiagramAsImage.SerializedImage is an screenshot of a RadDiagram (as bytes)

Converter={StaticResource ImageConverter} is <telerik:BinaryImageConverter x:Key="ImageConverter"/>

- when works.png is a screenshot when the style is correctly applied.

- when doesnt works.png is a screenshot of the behavior of the bug

- context.png is a global screen to show you how i'm using the RadCarousel and RadDiagram

 

=> Do you know why sometimes and randomly the picture disappears ?

 

Thank you

 

Valentin
Top achievements
Rank 1
Iron
Iron
 answered on 02 Oct 2019
10 answers
279 views
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" />
Dinko | Tech Support Engineer
Telerik team
 answered on 28 Nov 2018
7 answers
277 views
Hi,

Could you tell me how to stop the Carousel paging when I am holding down the left mouse button and moving my mouse cursor over the bottom of the control please?

Thanks,

Adam Smith
Elena
Telerik team
 answered on 05 Sep 2018
1 answer
121 views

0down votefavorite
1 I had a WPF project work with Kinect hand pointer and want do use Telerik RadCarouselPanel that bind with ListBox. the problem is that the hand pointer scroll speed is too fast, I tried ScrollViewer.CanContentScroll="False" but it break Telerik perspective effect on Listbox. how can I slow it down some how? here is the picture and the code:

 



    <ScrollViewer HorizontalAlignment="Center" Background="Transparent" VerticalAlignment="Center"  VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" Width="1691.381" Height="257.5" Grid.ColumnSpan="4"  Grid.RowSpan="3" Grid.Row="2">
<ListBox x:Name="listBox" Background="Transparent" BorderBrush="Transparent" SelectionChanged="listBox_SelectionChanged" SelectionMode="Single" ItemsSource="{Binding Source={StaticResource NamesTable}}" HorizontalContentAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" RenderTransformOrigin="0.5,0.5"  >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<telerik:RadCarouselPanel Name="MyCarousel" HorizontalAlignment="Center" VerticalAlignment="Center" Height="300"  Width="2000"/>
<!--<StackPanel Orientation="Horizontal" />-->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"  Height="200" Width="200" >
<Image Margin="3" Source="{Binding pic_path}" RenderOptions.BitmapScalingMode="Fant" RenderOptions.EdgeMode="Aliased"/>
<TextBox Margin="3" Text="{Binding name}" Visibility="Visible"/>

</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>

Dinko | Tech Support Engineer
Telerik team
 answered on 07 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?