Silverlight图像平移

时间:2011-04-23 16:37:11

标签: silverlight-4.0

我正在开发silverlight应用程序,我想像平移图像顶部,底部,左侧,右侧平移图像。

我使用了像素着色,但我没有成功。

感谢..

2 个答案:

答案 0 :(得分:0)

查看this sample

您还可以查看拖动的混合行为。

答案 1 :(得分:0)

这对我有用。用户可以使用该窗口预览放大的图像,并将图像平移到更相关的部分,例如,图像的底部。

使用窗口:

BitmapImage BMP = /* resolve the bitmap */;

PreviewImageWindow.Execute(BMP);

窗口的代码(后面)如下所示。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;

namespace ITIS.Controls.LinearViewer.Windows {

public partial class PreviewImageWindow : ChildWindow {

    /// <summary>See Execute</summary>
    PreviewImageWindow() {
        InitializeComponent();
    }

    private void OKButton_Click(object sender, RoutedEventArgs e) {
        this.DialogResult = true;
    }

    private void CancelButton_Click(object sender, RoutedEventArgs e) {
        this.DialogResult = false;
    }

    static public void Execute(BitmapImage imageSource) {

        PreviewImageWindow Window = new PreviewImageWindow();

        Window.Image.Source = imageSource;

        /* don't allow the window to grow larger than the image */
        Window.MaxWidth = imageSource.PixelWidth;
        Window.MaxHeight = imageSource.PixelHeight;

        Window.Show();
    }

    private void ChildWindow_KeyDown(object sender, KeyEventArgs e) {

        if (e.Key == Key.Escape) {

            DialogResult = false;
        }
    }

    Point? _lastPoint;

    bool _isMouseDown;

    private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {

        ((Image)sender).CaptureMouse();

        _isMouseDown = true;

        ShowCursor(e.GetPosition(Canvas));

        _lastPoint = e.GetPosition((Image)sender);
    }

    private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) {

        ((Image)sender).ReleaseMouseCapture();

        _isMouseDown = false;

        ShowCursor(e.GetPosition(Canvas));

        _lastPoint = null;
    }

    private void image_MouseMove(object sender, MouseEventArgs e) {

        if (_lastPoint != null) {

            Image Image = (Image)sender;

            Point CurrentPoint = e.GetPosition(Image);

            double 
                XDelta = CurrentPoint.X - _lastPoint.Value.X,
                YDelta = CurrentPoint.Y - _lastPoint.Value.Y;

            _lastPoint = null;

            if (XDelta != 0) {
                double NewLeft = Canvas.GetLeft(Image) + XDelta;
                if (NewLeft <= 0 && NewLeft + Image.ActualWidth >= Canvas.ActualWidth) {
                    Canvas.SetLeft(Image, NewLeft);
                }
            }

            if (YDelta != 0) {
                double NewTop = Canvas.GetTop(Image) + YDelta;
                if (NewTop <= 0 && NewTop + Image.ActualHeight >= Canvas.ActualHeight) {
                    Canvas.SetTop(Image, NewTop);
                }
            }

            _lastPoint = e.GetPosition(Image);
        }

        Point CanvasPoint = e.GetPosition(Canvas);
        ShowCursor(CanvasPoint);
    }

    private void Canvas_Loaded(object sender, RoutedEventArgs e) {

        TryDefaultImageToTop();
    }

    void TryDefaultImageToTop() {

        if (Image == null || Canvas == null) { return; }

        /* move the image up so we can focus on the road? user-friendly since we are most-likely going to look at the road, not the horizon or top - half */
        if (!_initialized) {

            _initialized = true;

            Canvas.SetTop(Image, Canvas.ActualHeight - Image.ActualHeight);
            Canvas.SetLeft(Image, (Canvas.ActualWidth - Image.ActualWidth) / 2);
        }
    }

    bool _initialized;

    private void image_Loaded(object sender, RoutedEventArgs e) {

        TryDefaultImageToTop();
    }

    private void image_MouseEnter(object sender, MouseEventArgs e) {

        imgOpenHand.Visibility = Visibility.Visible;
        imgClosedHand.Visibility = Visibility.Collapsed;

        ShowCursor(e.GetPosition(Canvas));
    }

    void ShowCursor(Point point) {

        if (_isMouseDown) {
            imgClosedHand.Visibility = Visibility.Visible;
            imgOpenHand.Visibility = Visibility.Collapsed;

            Canvas.SetLeft(imgClosedHand, point.X);
            Canvas.SetTop(imgClosedHand, point.Y);
        }
        else {
            imgClosedHand.Visibility = Visibility.Collapsed;
            imgOpenHand.Visibility = Visibility.Visible;

            Canvas.SetLeft(imgOpenHand, point.X);
            Canvas.SetTop(imgOpenHand, point.Y);
        }
    }

    private void image_MouseLeave(object sender, MouseEventArgs e) {
        imgOpenHand.Visibility = Visibility.Collapsed;
        imgClosedHand.Visibility = Visibility.Collapsed;
    }
}

}

窗口的XAML如下所示:

<controls:ChildWindow 
x:Class="ITIS.Controls.LinearViewer.Windows.PreviewImageWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Background="#383838" Foreground="WhiteSmoke"    
Title="Preview" Margin="50"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
KeyDown="ChildWindow_KeyDown"    
>
<Grid x:Name="LayoutRoot" Margin="0" Cursor="None" IsHitTestVisible="True">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Canvas Cursor="None" IsHitTestVisible="True" x:Name="Canvas" Loaded="Canvas_Loaded">
        <Image Source="{Binding ImageSource}" x:Name="Image"
               Cursor="None" Loaded="image_Loaded"
               MouseLeftButtonDown="image_MouseLeftButtonDown"
               MouseLeftButtonUp="image_MouseLeftButtonUp"
               MouseMove="image_MouseMove"
               MouseEnter="image_MouseEnter"
               MouseLeave="image_MouseLeave"
               IsHitTestVisible="True"
               />
        <Image Style="{StaticResource HandOpenImage}" x:Name="imgOpenHand" 
               Visibility="Collapsed" IsHitTestVisible="False" 
               />
        <Image Style="{StaticResource HandClosedImage}" x:Name="imgClosedHand"
               Visibility="Collapsed" IsHitTestVisible="False" 
               />
    </Canvas>        
</Grid>    

关于此代码的一些问题/评论:

  1. 此窗口的命名空间为“ITIS.Controls.LinearViewer.Windows”,请将命名空间更改为系统中更相关的名称。
  2. 正常光标图像为OpenHand,当鼠标按钮关闭时,图像变为HandClosed
  3. 图像的样式,我在全局应用程序范围的资源字典中有:
  4. (OPEN图像样式)

    <Style TargetType="Image" x:Key="HandOpenImage">
        <Setter Property="Source" Value="/ITIS.Controls.LinearViewer.Silverlight;component/Images/HandOpen.png" />
        <Setter Property="Width" Value="16" />
        <Setter Property="Height" Value="16" />
    </Style>
    

    (CLOSED图像样式)

    <Style TargetType="Image" x:Key="HandClosedImage">
        <Setter Property="Source" Value="/ITIS.Controls.LinearViewer.Silverlight;component/Images/HandClosed.png" />
        <Setter Property="Width" Value="13" />
        <Setter Property="Height" Value="11" />
    </Style>
    
    1. 此预览尝试以图像的下半部分开始,而不是上半部分。
    2. 希望这会有所帮助。我花了一些时间来消除一些烦恼。