Windowscommunitytoolkit: Carousel: Unable to override style of items of Carousel.

Created on 23 Jun 2017  路  13Comments  路  Source: windows-toolkit/WindowsCommunityToolkit

I am trying to write a style for Carousel items for ViewState Normal, OnFocus/Selected, Unselected, PointerOver etc. But unable to do this.
Created one UWP app, run on XBOX. When focus on one of the item of Carousel, It's display 2 border in white and black. I tried to change the color or width of that border but not possible

controls feature help wanted in progress

Most helpful comment

Actually, this is a good question. Applying a new Focus style is, today, not straightforward...
I tried several approaches, but no one was fine enough, in my point of view.
I will try an implementation, in the next couple of weeks, with a new CarouselItem style object.
Will make a PR is the solution is smart enough to resolve those kinds of problems / behaviors.

All 13 comments

There was talk to make a CarouselItem control but originally went against it. @Mimetis what are you thoughts about having this control? Any way to accomplish this without the control?

You can try to itterate over all the controls and change the Focus Visual Properties. For example:

```c#
var panel = CarouselControl.FindDescendant();
if (panel != null && panel.Children.Count > 0)
{
foreach (var child in panel.Children)
{
var control = child as FrameworkElement;
control.FocusVisualPrimaryBrush = new SolidColorBrush(Colors.Red);
control.FocusVisualPrimaryThickness = new Thickness(3);

}

}
```

I'd definitely make a vote for having a CarouselItem in the future for proper re-templating support.

As well you the above, you could inherit Carousel if you want and override the PrepareContainerForItemOverride method

 protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);

            FrameworkElement contentControl = element as ContentControl; // Effectively the ItemContainer

            // Do custom stuff here - possibly even add a Style DependencyProperty to your new "SuperCarousel"
            // and bind to contentControl's style here for XAML theming support.
        }

@nmetulev
That solution display following error:
image

@krishnakumar-mob-incedo FindDescendant is an extension method within the toolkit. It's in the Microsoft.Toolkit.Uwp.UI namespace. The dialog knows this and at the bottom has the Show potential fixes message. If you type the key combo Visual Studio will actually add the missing namespace for you

Thanks.
Actually, I am new for this tookit library. Just started last week using this. So have much info.
We have any document, which have all the info?

The sample app has a documentation for each item and you can also find documentation at http://docs.uwpcommunitytoolkit.com

Actually, this is a good question. Applying a new Focus style is, today, not straightforward...
I tried several approaches, but no one was fine enough, in my point of view.
I will try an implementation, in the next couple of weeks, with a new CarouselItem style object.
Will make a PR is the solution is smart enough to resolve those kinds of problems / behaviors.

Any more pointers on this appreciated. I would like to have a different style for the Selected Item than the remaining items (opacity), is there a way to do this? Also I am adding items one at a time so the PrepareContainerForItemOverride gets called only when that item is called (which will be the new selected item) but the earlier items now need to have a different opacity. Any help on how I could achieve this ?

One way would be iterate through all the controls on selection changed and apply opacity appropriately (or any style change).

Good evening, I did not understand how to set the width of the items to Stretch value. At the moment changing the width of the Page the items do not change their size automatically.
Thanks
Regards

Try the code snippet I posted above and set the HorizontalContentAlignment to Stretch on each of the controls.

I've reviewed and merged PR to master.

Was this page helpful?
0 / 5 - 0 ratings