How do you change the focus rectangle/style for the selected item in a Carousel control?

James posted over 16 years ago

Hi,I use an oval button for my item template for items in my carousel. when using an oval the focus rectangle appears as a large square behind my oval and look very bad. How can I change or turn off the standard focus rectangle. I would like to change it to a glow around the oval but like I said nothing I do affects the standard focus rectangle.A fast answer would be great as i have a demo with the CEO tomorrow...eek!Thanks

600

Jaimir Guerrero posted over 14 years ago in reply to John

Hi,

Could you inform me whether it solves your problem? The only thing I need is to hide the selected item.

Thank you for your answer.

Jaimir G.
Cancel
Reply

Cancel
170

John posted over 16 years ago in reply to [Infragistics] Curtis Taylor

Thanks for the reply. I will try to describe the problem we are having more clearly. We have a CarouselListBox defined with a <DataTemplate> for the items to have a solid border with radiused corners and set the ItemTemplate as follows:

<igWindows:XamCarouselListBox x:Name="ProductCarousel" ItemTemplate="{StaticResource OfferTemplate}"

When the CarouselListBoxItem is "selected", there is a background rectangle, filled with a gray linearGradientBrush displayed behind our item that extends beyond the item by about 5 pixels on each side.

We have tried to use the approach you recommended to set the "FocusVisualStyle" to Null, but that has no effect on the display of the currently selected item.

The problem seems to be on Border element named "itemContentHolderBackground" in the Grid named "itemContentHolder" that is deep in the control template. We need to be able to disable this background.

I can provide complete screencaps and such if you need more details (through email, ftp, ...).
Cancel
Reply

Cancel
9694

[Infragistics] Curtis Taylor posted over 16 years ago in reply to John

Hello,

The snippet I posted disables the selection focus rectangle around the entire list item (which includes the reflection). However, I notice I can get a focus rectangle to appear around the inner item in the list item. Is this what you are referring to? I am investigating this and will try to get back to you in a reasonable timeframe.

Thanks
Cancel
Reply

Cancel
170

John posted over 16 years ago in reply to [Infragistics] Curtis Taylor

I am running into the same issue, but using the XAML above does not hide the border around the current SelectedItem.

Digging into the visual tree with Mole, shows the following partial visual tree on the current SelectedItem:
CarouselListBoxItem
Grid

    ScrollViewer

      Grid

         Rectangle

            ScrollContentPresenter

               ViewBox

                 ContainerVisual

                    Grid - itemContentHolder

                       Border - itemContentHolderBackground

This border object is a rectangle filled with a gray gradient that is a few pixels larger than each CarouselListBoxItem and since we are using an ItemTemplate to style our list box items we really need to be able to disable this.

Any suggestions would be greatly appreciated.
Cancel
Reply

Cancel
9694

[Infragistics] Curtis Taylor posted over 16 years ago

Hello,

I apologize that we could not respond to this post the same day it was posted. We get so many posts that it takes a while to go through each one. If I had seen your request for expediency sooner, I would have tried to get you an answer sooner.

If you are using the XamCarouselListBox, you can disable focus for all CarouselListBoxItems by declaring the following style in a Resources section of your XAML.

<Style TargetType="{x:Type igWindows:CarouselListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Focusable" Value="False" />
</Style>

This will disable the focus rectangle around each list item. Taking this approach you can also define your FocusVisualStyle for each item to be a custom shape. This takes a little more work. If you would like further assistance on how to customize the shape of the focus visual style, please let me know.

Thanks,

Curtis
Cancel
Reply

Cancel