在wpf中滾動多個圖像

<Grid> 
    <Grid.Background> 
     <ImageBrush ImageSource="Images\Desert.jpg" 
      Stretch="UniformToFill" TileMode="Tile" 
      ViewportUnits="Absolute" Viewport="0,0,1024,768"/> 
    </Grid.Background> 
    <Grid.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <RectAnimation Storyboard.TargetProperty="Background.Viewport" 
          To="-1024,0,1024,768" Duration="0:0:10" 
          RepeatBehavior="Forever"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Grid.Triggers> 
</Grid>

我有這個代碼在循環網格中滾動單個圖像。
現在我有2張圖片1（紅色）和2（黃色）看起來像這樣。 enter image description here 它將在循環中滾動在wpf中滾動多個圖像

來源

2014-01-15 madan

您需要像[WPF Carousel]（http://wpfcarousel.codeplex.com）這樣的控件？要麼你需要沒有控制的附加功能？ –

如果您想要遵循當前的方法，則可以基於多個圖像構建單個ImageSource。我有2巴的（Desert1.png和Desert2.png在圖片文件夾中），並使用數據綁定到圖像刷ImageSource的設置對後面的代碼定義的屬性：

<!- Your original xaml ... only difference is the binding --> 
<ImageBrush ImageSource="{Binding CombinedImage}" 
      Stretch="None" TileMode="Tile" 
      ViewportUnits="Absolute" Viewport="0,0,1024,768"/>

下面的代碼樣本背後（感覺免費重構/使用/濫用，因爲你認爲合適）：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes; 
using System.Xaml; 

namespace WpfApplication 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 

      var uriSource1 = new Uri(@"pack://application:,,,/Images/Desert1.png", UriKind.Absolute); 
      BitmapImage bitmapImage1 = new BitmapImage(uriSource1); 

      var uriSource2 = new Uri(@"pack://application:,,,/Images/Desert2.png", UriKind.Absolute); 
      BitmapImage bitmapImage2 = new BitmapImage(uriSource2); 

      this.DataContext = this; 

      List<BitmapImage> images = new List<BitmapImage>() { bitmapImage1, bitmapImage2 }; 
      CombinedImage = GetCombinedImage(images); 
     } 

     private static RenderTargetBitmap GetCombinedImage(IEnumerable<BitmapImage> images) 
     { 
      // Get total width of all images 
      int totalWidthOfAllImages = images.Sum(p => (int)p.Width); 
      // Get max height of all images 
      int maxHeightOfAllImages = images.Max(p => (int)p.Height); 

      DrawingVisual drawingVisual = new DrawingVisual(); 
      using (DrawingContext drawingContext = drawingVisual.RenderOpen()) 
      { 
       double left = 0; 
       foreach (BitmapImage image in images) 
       { 
        drawingContext.DrawImage(image, new Rect(left, 0, image.Width, image.Height)); 
        left += image.Width; 
       } 
      } 

      RenderTargetBitmap bmp = new RenderTargetBitmap(totalWidthOfAllImages, maxHeightOfAllImages, 96, 96, PixelFormats.Default); 
      bmp.Render(drawingVisual); 
      return bmp; 
     } 

     public ImageSource CombinedImage { get; private set; } 
    } 
}

來源

2014-01-20 18:30:27 KornMuffin

謝謝@KornMuffin此代碼工作，但如果我把2張圖片都顯示50％ – madan

不客氣@馬丹。你使用的是什麼尺寸的圖像？讓我知道，我會試試看。 XAML容器太小而不適合組合圖像？ – KornMuffin

我的照片很小（259x194和277x182）。我嘗試了兩個更大的960x631，看看你的意思。這可能是由於視口的大小。您可能需要製作該動態（通過綁定），以便將其縮放到組合圖像。 – KornMuffin

我有圖像滑塊的代碼。我創建了使用用戶控件的Windows Phone 請檢查視頻http://www.screencast.com/t/XnhHwQFY您第一次需要更改邏輯。

但是，我認爲同樣的代碼，你可以使用WPF也

ImageSlider.xaml - 創建用戶控制

<UserControl x:Class="ImageSliderDemo.ImageSlider" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    d:DesignHeight="480" d:DesignWidth="480"> 

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> 
     <Canvas Height="220" x:Name="imageSliderCanvas" Width="451"> 
      <Image x:Name="imageViewOne" 
         Canvas.Left="0" 
         Canvas.Top="0" 
         Height="220" Width="440" Canvas.ZIndex="9"> 
       <Image.RenderTransform> 
        <TranslateTransform /> 
       </Image.RenderTransform> 
      </Image> 
      <Image x:Name="imageViewTwo" 
         Canvas.Left="0" 
         Height="220" Width="440" Canvas.ZIndex="10"> 
       <Image.RenderTransform> 
        <TranslateTransform /> 
       </Image.RenderTransform> 
      </Image> 
     </Canvas> 
     <StackPanel x:Name="PART_Host" /> 
    </Grid> 
</UserControl>

ImageSlider.xaml.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using Microsoft.Phone.Controls; 
using System.Threading; 
using System.Windows.Media.Imaging; 
using System.Windows.Markup; 

namespace ImageSliderDemo 
{ 
    public partial class ImageSlider : UserControl 
    { 
     private const int LOWER_ZINDEX = 9, UPPER_ZINDEX = 11, POSITION_FROM480 = 480, POSITION_TO0 = 0; 
     private int nextImage = 1; 

     #region "Image Slider Properies" 
     #region "Property - Length Readonly" 
     public static readonly DependencyProperty LengthProperty = DependencyProperty.Register("Length", typeof(int), typeof(ImageSlider), new PropertyMetadata(0)); 
     public int Length 
     { 
      get { return (int)GetValue(LengthProperty); } 
      private set { SetValue(LengthProperty, value); } 
     } 
     #endregion 

     #region "Property - Begin Delay Readonly" 
     public static readonly DependencyProperty BeginDelayProperty = DependencyProperty.Register("BeginDelay", typeof(double), typeof(ImageSlider), new PropertyMetadata(5000.00)); 
     public double BeginDelay 
     { 
      get { return (double)GetValue(BeginDelayProperty); } 
      set { SetValue(BeginDelayProperty, value); } 
     } 
     #endregion 

     #region "Property - Animation Duration Readonly" 
     public static readonly DependencyProperty AnimationDurationProperty = DependencyProperty.Register("AnimationDuration", typeof(double), typeof(ImageSlider), new PropertyMetadata(900.00)); 
     public double AnimationDuration 
     { 
      get { return (double)GetValue(AnimationDurationProperty); } 
      set { SetValue(AnimationDurationProperty, value); } 
     } 
     #endregion 

     #region "Property - Images" 
     public static readonly DependencyProperty ImagesProperty = DependencyProperty.Register("Images", typeof(List<SliderImage>), typeof(ImageSlider), new PropertyMetadata(null)); 
     public List<SliderImage> Images 
     { 
      get { return (List<SliderImage>)GetValue(ImagesProperty); } 
      set { SetValue(ImagesProperty, value); } 
     } 
     #endregion 
     #endregion 

     public ImageSlider() 
     { 
      InitializeComponent(); 
     } 

     /// <summary> 
     /// This Start method used begin the animation 
     /// </summary> 
     public void Start() 
     { 
      if (this.Images != null) 
      { 
       this.Length = this.Images.Count; 
       hidePrevious(imageViewOne); 
       showNext(imageViewTwo); 
      } 
      else 
      { 
       MessageBox.Show("Please add atleast two images"); 
      } 
     } 


     #region "Animation methods" 
     private void showNext(Image imageView) 
     { 
      TranslateTransform trans = imageView.RenderTransform as TranslateTransform; 
      DoubleAnimation animation = new DoubleAnimation(); 
      animation.To = POSITION_TO0; 
      animation.Duration = TimeSpan.FromMilliseconds(this.AnimationDuration); 
      animation.From = POSITION_FROM480; 
      animation.BeginTime = TimeSpan.FromMilliseconds(this.BeginDelay); 
      Storyboard.SetTarget(animation, trans); 
      Storyboard.SetTargetProperty(animation, new 
      PropertyPath(TranslateTransform.XProperty)); 
      // Create storyboard, add animation, and fire it up! 
      Storyboard storyboard = new Storyboard(); 
      storyboard.Children.Add(animation); 
      storyboard.Begin(); 
      Canvas.SetZIndex(imageView, UPPER_ZINDEX); 
      imageView.Visibility = Visibility.Visible; 
      if (nextImage > this.Length) 
      { 
       nextImage = 1; 
      } 

      BitmapImage nextBitmapImage = new BitmapImage(new Uri(this.Images[nextImage-1].Path, UriKind.Relative)); 
      imageView.Source = nextBitmapImage; 
      nextImage++; 
     } 

     private void hidePrevious(Image imageView) 
     { 
      TranslateTransform trans = imageView.RenderTransform as TranslateTransform; 
      DoubleAnimation animation = new DoubleAnimation(); 
      animation.To = - POSITION_FROM480; 
      animation.Duration = TimeSpan.FromMilliseconds(this.AnimationDuration); 
      animation.From = POSITION_TO0; 
      animation.BeginTime = TimeSpan.FromMilliseconds(this.BeginDelay); 
      Storyboard.SetTarget(animation, trans); 
      Storyboard.SetTargetProperty(animation, new 
      PropertyPath(TranslateTransform.XProperty)); 
      // Create storyboard, add animation, and fire it up! 
      Storyboard storyboard = new Storyboard(); 
      storyboard.Children.Add(animation); 
      storyboard.Begin(); 
      animation.Completed += hideAnimation_Completed; 
     } 

     private void hideAnimation_Completed(object sender, EventArgs e) 
     { 
      if (Canvas.GetZIndex(imageViewOne) > Canvas.GetZIndex(imageViewTwo)) 
      { 
       Canvas.SetZIndex(imageViewOne, LOWER_ZINDEX); 
       hidePrevious(imageViewOne); 
       showNext(imageViewTwo); 
      } 
      else 
      { 
       Canvas.SetZIndex(imageViewTwo, LOWER_ZINDEX); 
       hidePrevious(imageViewTwo); 
       showNext(imageViewOne); 
      } 
     } 
     #endregion 
    } 

}

按Ctrl + B，只需構建一次

SliderImage.cs - 添加新類

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 

namespace ImageSliderDemo 
{ 
    public class SliderImage 
    { 
     public string Name { get; set; } 
     public string Path { get; set; } 

     public SliderImage(string name, string path) 
     { 
      this.Name = name; 
      this.Path = path; 
     } 
    } 
}

然後做這個步驟

MainPage.xaml中添加在XAML頁面頂部xmlns:local="clr-namespace:[YOUR_PROJECT_NAMESPACE]"

然後添加剛纔添加此下方XAML

<local:ImageSlider x:Name="imageSlider"/>

MainPage.xaml.cs中負載圖片

  List<SliderImage> images = new List<SliderImage>(); 
      images.Add(new SliderImage("One", "Images/1.png")); 
      images.Add(new SliderImage("Two", "Images/2.png")); 
      images.Add(new SliderImage("Three", "Images/3.png")); 
      images.Add(new SliderImage("Four", "Images/4.png")); 
      imageSlider.Images = images; 
      imageSlider.Start();

注：我使用ImageSliderDemo作爲我的命名空間。如果您使用不同的請確保您更新用戶控制。而我第一次發現它是兩次顯示相同的圖像。您可以更改ImageSlider.xaml.cs文件中的邏輯

來源

2014-01-27 11:50:30

在wpf中滾動多個圖像

回答

相關問題