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}"
>
<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");
}
private void OtherScanGallery_OnIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
var panel = OtherScanGallery.FindCarouselPanel();
if (null == panel )
Log.Error("No panel after visible changed.");
}
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
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>
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?
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
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: