Search code examples
imagexamluwpcarouselmargin

How to customized carousel from microsoft.toolkit

I have a carousel from microsoft.toolkit XAML:

<controls:Carousel
                            x:Name="k2006Carousel"
                            VerticalAlignment="Center"
                            ItemDepth="300"
                            ItemMargin="0"
                            ItemRotationX="0"
                            ItemRotationY="-40"
                            ItemRotationZ="0"
                            Orientation="Horizontal"
                            SelectionChanged="bukuCarousel_SelectionChanged">
                            <controls:Carousel.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </controls:Carousel.EasingFunction>

                            <controls:Carousel.ItemTemplate>
                                <DataTemplate>
                        -->
                        <!--  Carousel content  -->
                        <!--
                                    <Grid x:Name="k2006CarouselGrid" Background="{x:Null}">
                                        <Grid PointerPressed="BukuUIElement_OnPointerPressed">
                                            <Image
                                                x:Name="cover"
                                                Width="280"
                                                Margin="0,10,0,10"
                                                HorizontalAlignment="Center"
                                                Source="{Binding Image}"
                                                Stretch="Uniform" />
                                        </Grid>
                                        <Rectangle
                                            Grid.Row="1"
                                            Height="140"
                                            Margin="0,0,0,-130"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Bottom">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                    <GradientStop Color="#801B1B1B" />
                                                    <GradientStop Offset="0.259" Color="#661B1B1B" />
                                                    <GradientStop Offset="0.681" Color="Transparent" />
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </DataTemplate>
                            </controls:Carousel.ItemTemplate>
                        </controls:Carousel>

From the xaml above, the output is like the image below: image 1

I want the margin between items to be 0 (no margin), like the image below: image 2

How to apply it?

Solution

  • For your requirement, you could set suitable negative value for ItemMargin.

    ItemMargin="-150"