CODEWITHSUNDEEP
c#xamlwin-universal-appwindows-10-universal
miratum
miratum

Reputation: 177

SelectionChanged and a FlipView

I am working on a windows universal app,I have a FlipView with 2 pages,each page contains 4 buttons,I want when I scroll from page1 I get page2,I tried this way:

<Page.Resources>
<DataTemplate x:Key="FlipViewItemTemplate">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0" />
<Button Grid.Column="0" Grid.Row="1" />
<Button Grid.Column="1" Grid.Row="0" />
<Button Grid.Column="1" Grid.Row="1" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="FlipViewItemTemplate1">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0" />
<Button Grid.Column="0" Grid.Row="1" />
<Button Grid.Column="1" Grid.Row="0" />
<Button Grid.Column="1" Grid.Row="1" />
</Grid>
</DataTemplate>
</Page.Resources

I called this method from my flipView named flipView1:

private void flipView1_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
  {
   flipView1.ItemTemplate = Resources["FlipViewItemTemplate"] as DataTemplate;
   }

what I get is one page with 4 buttons without scroll,is there any method can I use to show a diferent page in scrolling

thanks for help

Upvotes: 0

Views: 99

Answers (1)

Eric Verni&#233;
Eric Verni&#233;

Reputation: 36

DataTemplateSelector

May be the solution it's to use a DataTemplateSelector

here is a sample : 1) The class has to inherit from DataTemplateSelector nanamespace ExploringOfficeRestAPI.Styles.DataTemplateSelectors { public class FileFolderDataTemplateSelector : DataTemplateSelector { public DataTemplate FileTemplate { get; set; } public DataTemplate FolderTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) { var viewModelPublic = item as OneDrivePublicFile; if (viewModelPublic != null) { if (viewModelPublic.IsFile()) { return FileTemplate; }

            return FolderTemplate;
        }          
        return FolderTemplate;

    }
}

} 2) Define your XAML DataTemplate : Grid.Row="0" Grid.RowSpan="2" Margin="0" VerticalAlignment="Stretch" Height="150" Width="150"
SelectionHighlightColor="{StaticResource EORAForegroundBrush}"/> Grid.Row="0" Margin="0,0,10,0" VerticalAlignment="Top" HorizontalAlignment="Right"/> Grid.Row="1" Margin="10,0,0,-20" VerticalAlignment="Bottom" />

    </Grid>

</DataTemplate>
<DataTemplate x:Key="FileTemplate">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <Image Source="{Binding ThumbnailUrl}" Width="150" Height="150" Margin="0,0,0,0" Grid.RowSpan="2" VerticalAlignment="Top" />
        <TextBlock Text="{Binding name}" Foreground="{StaticResource EORAForegroundBrush}" 
                         Style="{StaticResource EORATextBlockStyle}" Width="auto" Height="50"  
                          Grid.Row="1" Margin="10,0,0,-20" VerticalAlignment="Bottom"  HorizontalAlignment="Left" />

    </Grid>
</DataTemplate>

3) Define the selector in your XAMl : xmlns:selector="using:ExploringOfficeRestAPI.Styles.DataTemplateSelectors"

        <selector:FileFolderDataTemplateSelector 
                    x:Key="FileFolderDataTemplateSelector" 
                    FolderTemplate="{StaticResource FolderTemplate}"
                    FileTemplate="{StaticResource FileTemplate}"/>

4) And last define the ItemTemplateSelector="{StaticResource FileFolderDataTemplateSelector}" for your FlipView

Upvotes: 1

Related Questions