在WPF c＃中將圖像和矩形組合在一起

Question

我的問題是我有一個表示平面的圖像和一個表示捕獲並另存為圖像的區域的矩形。 然而，當他們繞着WPF移動時，即使被告知它們以相同的速度走動，它們也會以不同的速度走動。

有沒有一種方法可以將它們組合到一個標簽中，以便將它們視為一個對象，但同時又分開？ 我需要將它們分開，因為矩形的大小應該能夠更改平面圖像不應更改的位置。

xaml：

<Rectangle x:Name="rect" Fill="RED" HorizontalAlignment="Left" Height="89" Stroke="Black" VerticalAlignment="Top" Width="117" Margin="349,204,0,0"/>
<Image x:Name="planeIMG" Source="plane.PNG" Height="75" Width="75" Margin="367,213,369,335"/>

向左移動的代碼（其他代碼相同）

if ((Keyboard.GetKeyStates(Key.A) & KeyStates.Down) > 0)
        {
            Console.WriteLine("Test left key is pressed ");
            rect.Margin = new Thickness(rect.Margin.Left -10 , rect.Margin.Top, rect.Margin.Right, rect.Margin.Bottom);
            planeIMG.Margin = new Thickness(planeIMG.Margin.Left -10, planeIMG.Margin.Top, planeIMG.Margin.Right, planeIMG.Margin.Bottom);
        }

提前謝謝了

Answer 1

就像克里斯·W。（Chris W.）提到的那樣：將它們夾在網格中。

我建議您在使用WPF時嘗試移動MVVM模式，並可以隨意編寫一些示例。 為您的移動項目定義一個視圖模型（這是一個包含圖像和矩形的網格）。

 class MovingItemViewModel : INotifyPropertyChanged 
{
    public Thickness Margin { get; set; }
    public String Data { get; set; }

    public ICommand MoveRightCommand { get; set; }

    public MovingItemViewModel() {
        Margin = new Thickness(0, 0, 0, 0);
        Data = "Hello!";
        MoveRightCommand = new RelayCommand(param => MoveRight());
    }

    public void MoveRight() {
        Console.WriteLine("Right Key is pressed!");
        double offset = Margin.Right - 10;
        Margin = new Thickness(0, 0, offset, 0);
        OnPropertyChanged("Margin");
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged( [CallerMemberName] string propertyName = null ) {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在這里，我使用RelayCommand類將用戶輸入路由到視圖模型。 您可以在此處閱讀有關RelayCommand的更多信息。 INotifyPropertyChanged的實現是為了通知視圖模型中的更改。

在您的視圖（可能只是主窗口）中，您可以通過鍵綁定調用MoveRight方法。 網格的位置綁定到視圖模型的margin屬性。

<Window.InputBindings>
    <KeyBinding Command="{Binding Path=MoveRightCommand}" 
  Key="Right" ></KeyBinding>
</Window.InputBindings>
<Grid>
    <Grid Margin="{Binding Thickness}" Height="100" Width="100" Background="Blue">
        <Label Content="I like to move it!" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="100"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="0,41,0,0" TextWrapping="Wrap" Text="Move it!" VerticalAlignment="Top" Width="100"/>
    </Grid>
</Grid>

如果需要，可以用圖像和矩形代替標簽和文本框。

最后，在視圖后面的代碼中定義數據上下文。

 public MainWindow()
    {
        InitializeComponent();
        MovingItemViewModel vm = new MovingItemViewModel();
        DataContext = vm;
    }

這不僅意味着要回答您的問題（希望如此），而且還可以使您快速了解MVVM。 在網上可以找到很多更深入的信息。