如何在UWP中创建Image slider？开发者技术求助

Hey Steven, sorry to hear NuGet plugins aren't working out for your UWP image slider—no worries though, we can build a perfectly functional one using UWP's native controls, no external packages required! Let me walk you through two solid options depending on your needs.

Option 1: Use UWP's Built-in FlipView (Quick & Easy) #

The FlipView is UWP's out-of-the-box control for swipeable content, and it’s ideal for a basic image slider. It supports touch swipes, keyboard navigation, and even has built-in transition animations.

Step 1: Add the FlipView to Your XAML #

<FlipView x:Name="ImageSlider" 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Stretch">
    <!-- Define how each image is displayed -->
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" 
                   Stretch="UniformToFill" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center"/>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Step 2: Populate the Slider with Images (C# Code-behind) #

In your page’s constructor or Loaded event, load your image sources (local assets or web URIs):

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    var imageSources = new List<Uri>
    {
        // Local assets (replace with your image paths)
        new Uri("ms-appx:///Assets/Beach.jpg"),
        new Uri("ms-appx:///Assets/Mountain.jpg"),
        new Uri("ms-appx:///Assets/City.jpg"),
        // Web images (if your app has internet access)
        new Uri("https://example.com/remote-image.jpg")
    };

    ImageSlider.ItemsSource = imageSources;
}

Add Explicit Navigation Buttons (Optional) #

If you want users to have clickable next/previous buttons, add them to your layout:

<Grid>
    <FlipView x:Name="ImageSlider" ... />
    
    <Button x:Name="PrevBtn" 
            Content="←" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Center"
            Margin="20,0"
            FontSize="24"
            Click="PrevBtn_Click"/>
    
    <Button x:Name="NextBtn" 
            Content="→" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Center"
            Margin="20,0"
            FontSize="24"
            Click="NextBtn_Click"/>
</Grid>

Then add the button click logic in code-behind:

private void PrevBtn_Click(object sender, RoutedEventArgs e)
{
    if (ImageSlider.SelectedIndex > 0)
    {
        ImageSlider.SelectedIndex--;
    }
}

private void NextBtn_Click(object sender, RoutedEventArgs e)
{
    if (ImageSlider.SelectedIndex < ImageSlider.Items.Count - 1)
    {
        ImageSlider.SelectedIndex++;
    }
}

Option 2: Custom Slider with ScrollViewer (For More Control) #

If you need advanced features like auto-scrolling, custom spacing between images, or unique animations, build a custom slider using ScrollViewer and ItemsControl.

Step 1: XAML Layout #

<ScrollViewer x:Name="SliderScrollViewer" 
              HorizontalScrollBarVisibility="Hidden" 
              VerticalScrollBarVisibility="Disabled"
              HorizontalScrollMode="Enabled"
              ScrollViewer.HorizontalSnapPointsType="MandatorySingle">
    <ItemsControl x:Name="CustomImageSlider"
                  ItemsSource="{Binding ImageSources}">
        <!-- Arrange images in a horizontal row -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!-- Image template with custom width and spacing -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" 
                       Width="{Binding ActualWidth, ElementName=SliderScrollViewer}"
                       Stretch="UniformToFill"
                       Margin="0,0,15,0"/> <!-- Spacing between images -->
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

Step 2: Add Auto-Scroll Functionality (Optional) #

To make the slider auto-advance every few seconds, add a DispatcherTimer in code-behind:

private DispatcherTimer _autoScrollTimer;

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    // Populate images first (same as Option 1)
    var imageSources = new List<Uri> { ... };
    CustomImageSlider.ItemsSource = imageSources;

    // Set up auto-scroll
    SetupAutoScroll();
}

private void SetupAutoScroll()
{
    _autoScrollTimer = new DispatcherTimer
    {
        Interval = TimeSpan.FromSeconds(3) // Scroll every 3 seconds
    };
    _autoScrollTimer.Tick += AutoScrollTimer_Tick;
    _autoScrollTimer.Start();
}

private void AutoScrollTimer_Tick(object sender, object e)
{
    var currentOffset = SliderScrollViewer.HorizontalOffset;
    var maxOffset = SliderScrollViewer.ScrollableWidth;
    
    if (currentOffset >= maxOffset)
    {
        // Reset to first image
        SliderScrollViewer.ScrollToHorizontalOffset(0);
    }
    else
    {
        // Scroll to next image
        SliderScrollViewer.ScrollToHorizontalOffset(currentOffset + SliderScrollViewer.ActualWidth);
    }
}

// Clean up the timer when the page is navigated away from
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    _autoScrollTimer?.Stop();
    base.OnNavigatedFrom(e);
}

Pro Tips #

• Handle Image Loading Errors: Add an ImageFailed event to the Image control to show a placeholder if an image fails to load.
• MVVM Friendly: If you’re using MVVM, bind ItemsSource to a collection in your view model instead of setting it directly in code-behind.
• Custom Animations: Add Storyboard animations to the FlipView or ScrollViewer for unique transition effects.

内容的提问来源于stack exchange，提问作者steven