Как создать автоматическую анимированную карусель, чтобы содержимое внутри GridView с DataTemplates начинало прокручиваться с использованием C # или XAML? - PullRequest
Новая
       9

Как создать автоматическую анимированную карусель, чтобы содержимое внутри GridView с DataTemplates начинало прокручиваться с использованием C # или XAML?

0 голосов
/ 25 октября 2018

Я хочу, чтобы содержимое моего GridView прокручивалось при запуске раскадровки.Сейчас раскадровка нацелена на сетку, а не на контент.Как мне сделать это для прокрутки внутри вида сетки?

Вот так выглядят мои раскадровки и шаблоны данных: 

<Page.Resources    
 <Storyboard x:Key="CarouselStoryboard">
        <DoubleAnimation
            Storyboard.TargetName="CarouselTransform" 
            Storyboard.TargetProperty="X"/>
 </Storyboard>

    <DataTemplate x:Key="CatTemplate">
        <Grid>
            <StackPanel Margin="30,0,30,0" Background="Red">

        </StackPanel>
        </Grid>
    </DataTemplate>

  <DataTemplate x:Key="DogTemplate">
        <Grid>
            <StackPanel Margin="30,0,30,0" Background="Green">

        </StackPanel>
        </Grid>
    </DataTemplate>
</Page.Resources>

А вот так выглядит мой Griview: 

<GridView x:Name="myGridView" ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"
            ScrollViewer.HorizontalScrollBarVisibility="Hidden"
      ScrollViewer.HorizontalScrollMode="Auto"
      ScrollViewer.VerticalScrollBarVisibility="Disabled"
      ScrollViewer.VerticalScrollMode="Disabled">

        <GridView.RenderTransform>
            <TranslateTransform x:Name="CarouselTransform" />
        </GridView.RenderTransform>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

</GridView>
<Button Click="Left_Click" Content="Left" Background="Blue" HorizontalAlignment="Left"Width="405"/>

И вот как я запускаю свою раскадровку, используя C # 

  private int currentElement = 0;

    private void Left_Click(object sender, RoutedEventArgs e)
    {
        if (currentElement < 100)
        {
            currentElement++;
            AnimateCarousel();
        }
    }
    private void AnimateCarousel()
    {
        Storyboard storyboard =  (this.Resources["CarouselStoryboard"] as Storyboard);
        DoubleAnimation animation = storyboard.Children.First() as DoubleAnimation;
        animation.To = -200 * currentElement;
        storyboard.Begin();
    }

1 Ответ

0 голосов
/ 26 октября 2018

Прежде всего, напрямую анимированные свойства присоединения не будут работать из-за отсутствия разумного встроенного вложенного свойства:

  1. Что такое scrollview в шаблоне управления :

Обычно элемент управления ScrollViewer существует как составная часть других элементов управления.Часть ScrollViewer вместе с классом ScrollContentPresenter для поддержки будет отображать область просмотра вместе с полосами прокрутки только тогда, когда пространство макета хост-элемента управления ограничено меньшим, чем размер расширенного содержимого.Это часто относится к спискам, , поэтому шаблоны ListView и GridView всегда включают ScrollViewer .

Чтобы повлиять на некоторые свойства и свойства, относящиеся к части ScrollViewer, ScrollViewer определяет несколько свойств, прикрепленных к XAML:

  • ScrollViewer.BringIntoViewOnFocusChange
  • ScrollViewer.Hor HorizontalScrollBarVisibility
  • ScrollViewer.Hor HorizontalScrollMode
  • ScrollViewer.IsDeferredScrollingEnabled
  • ScrollViewer.IsHor HorizontalRailEnabled
  • ScrollViewNerISCIDEISCH
  • ScrollViewer.IsVerticalRailEnabled
  • ScrollViewer.IsVerticalScrollChainingEnabled
  • ScrollViewer.IsZoomChainingEnabled
  • ScrollViewer.VerticalScrollMode
  • ScrollViewer.ZoomMode

Анимация вложенных свойств XAML : мы можем анимировать только встроенные вложенные свойства.

Таким образом, вместо вышеприведенной идеи нам нужно сначала включить ScrollView в GridView:

  1. Создать свой собственный GridView 

    public class MyGridView:GridView
{
 private ScrollViewer myscrollviewer;

 public ScrollViewer MyScrollViewer
 {
    get { return myscrollviewer; }
    set { myscrollviewer = value; }
 }

 protected override void OnApplyTemplate()
 {
    base.OnApplyTemplate();
    ScrollViewer testscrollviewer = GetTemplateChild("ScrollViewer") as ScrollViewer;
    myscrollviewer = testscrollviewer;
 }
}

  2. Используйте его в своем XAML: 

    <local:MyGridView x:Name="mygv".../>

  3. Здесь, поскольку VerticalOffset доступен только для чтения, я не могу использовать DoubleAnimation для анимации просмотра прокрутки.Благодаря Джастину он поделился этим решением .С помощью ScrollView.ChangeView мы можем получить некоторую анимацию.И более простой способ, если вам не нужна анимация: 

     mygv.ScrollIntoView(mygv.Items[10], ScrollIntoViewAlignment.Leading);
...