Question

我试图在我的Xamarin应用程序[For UWP]中开发简单的介绍，类似于带导航点的幻灯片（https://github.com/chrisriesgo/xamarin-forms-carouselview - 我认为它太复杂了，而且它不适用于Windows平台。另一个例子但它不起作用：https://gist.github.com/adamped/9367c64e64e12e063508309f35a9d6eb#file-carouselview-indicators）。有没有简单的方法为Xamarin.Form.CarouselPage添加点？

Slideshow.cs：

public SlideShow()
        {
            Children.Add(new SimpleContentPage1());
            Children.Add(new SimpleContentPage2());
            Children.Add(new SimpleContentPage3());
        }

App.xaml.cs

var slidePage = new SlideShow();
        MainPage = slidePage;

每个ContentPage都有一些图像/标签/自定义控件。

Answer 1

有没有简单的方法可以为Xamarin.Form.CarouselPage添加点？

当然，让我们看看Xamarin如何实现这种控制：

对于UWP，Xamarin在Xamarin.Forms.Platform.WinRT命名空间下使用渲染器，请参阅CarouselPageRenderer.cs

public class CarouselPageRenderer : FlipView, IVisualElementRenderer

它实际上继承自FlipView控件。

因此，我们可以创建一个目标类型为FlipView的样式并添加项目指示符。

为指标（LINK）创建一个控件：

public sealed class FlipViewIndicator : ListBox
{
/// <summary>
/// Initializes a new instance of the <see cref="FlipViewIndicator"/> class.
/// </summary>
public FlipViewIndicator()
{
    this.DefaultStyleKey = typeof(FlipViewIndicator);
}

/// <summary>
/// Gets or sets the flip view.
/// </summary>
public FlipView FlipView
{
    get { return (FlipView)GetValue(FlipViewProperty); }
    set { SetValue(FlipViewProperty, value); }
}

/// <summary>
/// Identifies the <see cref="FlipView"/> dependency property
/// </summary>
public static readonly DependencyProperty FlipViewProperty =
    DependencyProperty.Register("FlipView", typeof(FlipView), typeof(FlipViewIndicator), new PropertyMetadata(null, (depobj, args) =>
    {
        FlipViewIndicator fvi = (FlipViewIndicator)depobj;
        FlipView fv = (FlipView)args.NewValue;

        // this is a special case where ItemsSource is set in code
        // and the associated FlipView's ItemsSource may not be available yet
        // if it isn't available, let's listen for SelectionChanged 
        fv.SelectionChanged += (s, e) =>
        {
            fvi.ItemsSource = fv.Items;
        };

        fvi.ItemsSource = fv.Items;

        // create the element binding source
        Binding eb = new Binding();
        eb.Mode = BindingMode.TwoWay;
        eb.Source = fv;
        eb.Path = new PropertyPath("SelectedItem");

        // set the element binding to change selection when the FlipView changes
        fvi.SetBinding(FlipViewIndicator.SelectedItemProperty, eb);
    }));

}

主题（themes\Generic.xaml）：

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <SolidColorBrush x:Key="FlipViewIndicatorUnselectedThemeBrush">Gray</SolidColorBrush>
        <SolidColorBrush x:Key="FlipViewIndicatorSelectedThemeBrush">#FFFFFFFF</SolidColorBrush>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="FlipViewIndicatorUnselectedThemeBrush">Gray</SolidColorBrush>
        <SolidColorBrush x:Key="FlipViewIndicatorSelectedThemeBrush">#FF000000</SolidColorBrush>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="FlipViewIndicatorUnselectedThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}" />
        <SolidColorBrush x:Key="FlipViewIndicatorSelectedThemeBrush" Color="{ThemeResource SystemColorHighlightColor}" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<Style TargetType="ListBoxItem" x:Key="FlipViewIndicatorItem">
    <Setter Property="Padding" Value="0,4,10,4"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PART_FlipViewIndicatorItem">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewIndicatorSelectedThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PART_FlipViewIndicatorItem">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewIndicatorSelectedThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PART_FlipViewIndicatorItem">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewIndicatorSelectedThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse x:Name="PART_FlipViewIndicatorItem" 
                               Width="20" Height="20" Fill="{ThemeResource FlipViewIndicatorUnselectedThemeBrush}" 
                               Margin="0,5,5,0" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="local:FlipViewIndicator">
    <Setter Property="Margin" Value="3,0,0,0" />
    <Setter Property="ItemContainerStyle" Value="{StaticResource FlipViewIndicatorItem}" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <Border x:Name="PART_FlipViewIndicatorLayoutRoot" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PART_FlipViewIndicatorLayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="PART_FlipViewIndicatorLayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxDisabledForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="PART_FlipViewIndicatorLayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxFocusBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ScrollViewer x:Name="ScrollViewer" 
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
                                  Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" 
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                        <ItemsPresenter Margin="{TemplateBinding Margin}" />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

修改the default template of FlipView，使用上述控件（LINK）：

<Application
x:Class="CarouselPageNavigation.UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CarouselPageNavigation.UWP"
xmlns:control="using:CarouselPageNavigation.UWP.Controls"
RequestedTheme="Light">
<Application.Resources>
    <Style TargetType="FlipView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="FlipView">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid.Resources>
                                <!--Omitted-->
                            </Grid.Resources>
                        </Grid>
                        <StackPanel Grid.Row="1">
                            <control:FlipViewIndicator FlipView="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                    VerticalAlignment="Bottom"
                                    HorizontalAlignment="Center"
                                    Margin="5"/>
                        </StackPanel>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

请参阅here

<强>截图：

XamarinForm CarouselPage - UWP幻灯片

1 个答案: