XamarinForm CarouselPage - UWP Slideshow

私のXamarinアプリで簡単なイントロを開発しようとしています。[UWP用]、ナビゲーションドット付きのスライドショーに似ています（https://github.com/chrisriesgo/xamarin-forms-carouselview - 私はあまりにも複雑で、Windowsプラットフォームではないと思います。仕事：https://gist.github.com/adamped/9367c64e64e12e063508309f35a9d6eb#file-carouselview-indicators）。 Xamarin.Form.CarouselPageにドットを追加する簡単な方法はありますか？XamarinForm CarouselPage - UWP Slideshow

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には、いくつかの画像/ラベル/カスタムコントロールを持っています。

出典

2016-10-23 user3045261

Xamarin.Form.CarouselPageに簡単にドットを追加できますか？

確かに、のはXamarinは、このコントロールを実装する方法を見てみましょう：

UWPについて、XamarinはXamarin.Forms.Platform.WinRT名前空間の下でレンダラを使用して、それが実際にFlipViewコントロールから継承CarouselPageRenderer.cs

public class CarouselPageRenderer : FlipView, IVisualElementRenderer

を参照してください。

対象タイプが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）を使用します：here

スクリーンショットで私のデモをご覧ください

を10

出典

2016-10-25 12:57:18

XamarinForm CarouselPage - UWP Slideshow

答えて

関連する問題