Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Armin Wild
30
XamCarouselListBox Items not correctly aligned on Path when working with Curves and Arcs.
posted

Hello, 

i am currently working with the XamCarouselListBox and my goal is a behavior more or less like a radial menu in a semi circle.

Having a look at your proivided examples i can see a view Examples where an Arc or curve is used as a path to animate on.

The problem with that is,  that the path is either the "upper" or "lower" half of a circle. Its never the "left" or "right half of the circle. 

Whenever i try to create a left half of the circle using an arc the CarouselListBox animates it not correctly on the path.

Here is a small Example which shows what my current problem is:

    <Window.Resources>
        <DataTemplate x:Key="SimpleDataTemplate">
            <Label Content="{Binding}" FontSize="10" />
        </DataTemplate>
        <PathGeometry x:Key="innerGeometry">
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="100,100">

                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <ArcSegment
                                    IsLargeArc="True"
                                    Point="100,200"
                                    Size="1, 1"
                                    SweepDirection="CounterClockwise" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
        <Pen
            x:Key="pen"
            Brush="Black"
            Thickness="1" />
    </Window.Resources>
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <igWindows:XamCarouselListBox Grid.Column="0" ItemTemplate="{StaticResource SimpleDataTemplate}">
            <igWindows:XamCarouselListBox.ViewSettings>

                <igWindows:CarouselViewSettings
                    IsListContinuous="True"
                    ItemPath="{Binding ElementName=smilePath}"
                    ItemPathHorizontalAlignment="Stretch"
                    ItemPathRenderPen="{StaticResource pen}"
                    ItemPathStretch="Uniform"
                    ItemPathVerticalAlignment="Stretch"
                    ReserveSpaceForReflections="False"
                    RotateItemsWithPathTangent="False" />
            </igWindows:XamCarouselListBox.ViewSettings>
            <System:String>Item 1</System:String>
            <System:String>Item 2</System:String>
            <System:String>Item 3</System:String>
            <System:String>Item 4</System:String>
            <System:String>Item 5</System:String>
            <System:String>Item 6</System:String>
            <System:String>Item 7</System:String>
            <System:String>Item 8</System:String>
            <System:String>Item 9</System:String>
            <System:String>Item 10</System:String>
            <System:String>Item 11</System:String>
        </igWindows:XamCarouselListBox>

        <igWindows:XamCarouselListBox Grid.Column="1" ItemTemplate="{StaticResource SimpleDataTemplate}">
            <igWindows:XamCarouselListBox.ViewSettings>

                <igWindows:CarouselViewSettings
                    IsListContinuous="True"
                    ItemPath="{Binding ElementName=smile90DegreePath1}"
                    ItemPathHorizontalAlignment="Stretch"
                    ItemPathRenderPen="{StaticResource pen}"
                    ItemPathStretch="Uniform"
                    ItemPathVerticalAlignment="Stretch"
                    ReserveSpaceForReflections="False"
                    RotateItemsWithPathTangent="False" />
            </igWindows:XamCarouselListBox.ViewSettings>

            <System:String>Item 1</System:String>
            <System:String>Item 2</System:String>
            <System:String>Item 3</System:String>
            <System:String>Item 4</System:String>
            <System:String>Item 5</System:String>
            <System:String>Item 6</System:String>
            <System:String>Item 7</System:String>
            <System:String>Item 8</System:String>
            <System:String>Item 9</System:String>
            <System:String>Item 10</System:String>
            <System:String>Item 11</System:String>
        </igWindows:XamCarouselListBox>

        <igWindows:XamCarouselListBox Grid.Column="2" ItemTemplate="{StaticResource SimpleDataTemplate}">
            <igWindows:XamCarouselListBox.ViewSettings>

                <igWindows:CarouselViewSettings
                    IsListContinuous="True"
                    ItemPath="{Binding ElementName=smile90DegreePath2}"
                    ItemPathHorizontalAlignment="Stretch"
                    ItemPathRenderPen="{StaticResource pen}"
                    ItemPathStretch="Uniform"
                    ItemPathVerticalAlignment="Stretch"
                    ReserveSpaceForReflections="False"
                    RotateItemsWithPathTangent="False" />
            </igWindows:XamCarouselListBox.ViewSettings>

            <System:String>Item 1</System:String>
            <System:String>Item 2</System:String>
            <System:String>Item 3</System:String>
            <System:String>Item 4</System:String>
            <System:String>Item 5</System:String>
            <System:String>Item 6</System:String>
            <System:String>Item 7</System:String>
            <System:String>Item 8</System:String>
            <System:String>Item 9</System:String>
            <System:String>Item 10</System:String>
            <System:String>Item 11</System:String>
        </igWindows:XamCarouselListBox>

        <igWindows:XamCarouselListBox Grid.Column="3" ItemTemplate="{StaticResource SimpleDataTemplate}">
            <igWindows:XamCarouselListBox.ViewSettings>

                <igWindows:CarouselViewSettings
                    IsListContinuous="True"
                    ItemPath="{Binding ElementName=arcPath}"
                    ItemPathHorizontalAlignment="Stretch"
                    ItemPathRenderPen="{StaticResource pen}"
                    ItemPathStretch="Uniform"
                    ItemPathVerticalAlignment="Stretch"
                    ReserveSpaceForReflections="False"
                    RotateItemsWithPathTangent="False" />
            </igWindows:XamCarouselListBox.ViewSettings>

            <System:String>Item 1</System:String>
            <System:String>Item 2</System:String>
            <System:String>Item 3</System:String>
            <System:String>Item 4</System:String>
            <System:String>Item 5</System:String>
            <System:String>Item 6</System:String>
            <System:String>Item 7</System:String>
            <System:String>Item 8</System:String>
            <System:String>Item 9</System:String>
            <System:String>Item 10</System:String>
            <System:String>Item 11</System:String>
        </igWindows:XamCarouselListBox>

        <Path
            Name="smilePath"
            Width="Auto"
            Height="Auto"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Data="M 70 110 C 70 140, 110 140, 110 110"
            Opacity="1"
            Stretch="Fill"
            Visibility="Hidden" />

        <Path
            Name="smile90DegreePath1"
            Width="Auto"
            Height="Auto"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Data="M 70 110 C 0 110, 0 140, 70 140"
            Opacity="1"
            Stretch="Fill"
            Visibility="Hidden" />

        <Path
            Name="smile90DegreePath2"
            Width="Auto"
            Height="Auto"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Data=" M 110 110 Q 0 125 110 140"
            Opacity="1"
            Stretch="Fill"
            Visibility="Hidden" />

        <Path
            Name="arcPath"
            Width="Auto"
            Height="Auto"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Data="{StaticResource innerGeometry}"
            Opacity="1"
            Stretch="Fill"
            Visibility="Visible" />
    </Grid>

What i want to achieve is something like this(This is not your CarouselListBox) :

Could you help me  understand what i am missing to archieve this, please?

Thank you in advance. 

Best regards,

Armin

Parents
  • 34430
    Verified Answer
    Offline posted

    Hello Armin,

    I have been investigating into the behavior you are looking to achieve, and looking at your sample project along with your screenshot, I am under the impression that the closest XamCarouselListBox in your sample to your requirement is the one in Grid.Column=”3”.

    The reason that the items are currently showing the way they are is because of the size of the actual CarouselListBoxItem that is being created. These items have a default height and width of 100 and 150, respectively, and they align their items vertically to the bottom and center horizontally. This essentially means that all of your Textblock elements in your sample project are at the bottom of a 100 height container, and your path will go through the center of that container.

    You can control the height and width of the container by providing a CarouselViewSettings.ItemSize. For example, in your sample, I have realigned your carousel to be in the center of the page and have provided an ItemSize of 100,30 (100 width, 30 height) to attempt to approximate the size of your text blocks. This causes the carousel to look like the attached screenshot.

    This is not exact to your requirement, but to be honest, I’m not sure how you would achieve this requirement with the current implementation of the XamCarouselListBox, as the path you define will always go through the center of the items of the list. As such, if you would like to see a behavior where you could align the items to the “inside” or “outside” of the path, I believe my best recommendation at the moment would be to suggest this as a new feature for the XamCarouselListBox control at our WPF Ideas Site, here: https://www.infragistics.com/community/ideas/i/ultimate-ui-for-wpf. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.

    Please let me know if you have any other questions or concerns on this matter.

Reply Children
No Data