使用鼠标保持网格单元高度和宽度保持在网格移动

时间:2018-04-24 10:47:51

标签: wpf grid aspect-ratio

<Grid>
  <Grid x:Name="thumbGrid" ShowGridLines="True" ClipToBounds="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{Binding Path=ThumbSelectorLeftMargin, Mode=TwoWay}"/>
                    <ColumnDefinition Width="{Binding Path=ThumbWidthSelector, Mode=TwoWay}"/>
                    <ColumnDefinition Width="{Binding Path=ThumbSelectorRightMargin, Mode=TwoWay}" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="{Binding Path=ThumbSelectorTopMargin, Mode=TwoWay}" />
                    <RowDefinition Height="{Binding Path=ThumbHeightSelector, Mode=TwoWay}"/>
                    <RowDefinition Height="{Binding Path=ThumbSelectorBottomMargin, Mode=TwoWay}"/>
                </Grid.RowDefinitions>

                <GridSplitter Grid.Column="0" Grid.RowSpan="3" HorizontalAlignment="Right" BorderBrush="Transparent"  
                                  BorderThickness="2" ShowsPreview="True" DragCompleted="ThumbLeftGridSplitterDragCompleted" />

                <GridSplitter Grid.Column="2" Grid.RowSpan="3" HorizontalAlignment="Left" BorderBrush="Transparent"  
                                  BorderThickness="2" ShowsPreview="True" DragCompleted="ThumbRightGridSplitterDragCompleted" />

                <Grid x:Name="thumbImgGrid" MouseDown="thumbImgGrid_MouseDown" MouseMove="thumbImgGrid_MouseMove" MouseUp="thumbImgGrid_MouseUp"   Grid.Row="1" Grid.Column="1">
                    <Border x:Name="thumbBorder">
                        <Image Stretch="Fill"/>
                        <Border.Style>
                            <Style TargetType="Border">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=ThumbBackgroundEntity.FillType}" Value="Color">
                                        <Setter Property="Background" Value="{Binding Path=ThumbBackgroundEntity.BackgroundColor , Mode=TwoWay}" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=ThumbBackgroundEntity.FillType}" Value="NoFill">
                                        <Setter Property="Background" Value="{Binding Path=ThumbBackgroundEntity.BackgroundColor , Mode=TwoWay}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                    <Border Opacity="{Binding Path=ThumbBackgroundEntity.Opacity , Mode=TwoWay}">
                        <Image x:Name="thumbImage" Source="{Binding Path=ThumbBackgroundEntity.BackgroundImageFullPath , Mode=TwoWay, Converter={StaticResource StringToImgConverter}}" 
                               RenderTransformOrigin="0.5, 0.5" Stretch="Fill">
                            <Image.LayoutTransform>
                                <RotateTransform Angle="{Binding Path=ThumbBackgroundEntity.ImageAngle , Mode=TwoWay}"/>
                            </Image.LayoutTransform>
                        </Image>
                        <Border.Style>
                            <Style TargetType="Border">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=ThumbBackgroundEntity.FillType}" Value="Color">
                                        <Setter Property="Visibility" Value="Hidden" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=ThumbBackgroundEntity.FillType}" Value="NoFill">
                                        <Setter Property="Visibility" Value="Hidden" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
              </Grid>

                <GridSplitter Grid.Row="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" BorderBrush="Transparent" BorderThickness="2" ShowsPreview="True"/>

                <GridSplitter Grid.Row="2" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Transparent" BorderThickness="2" ShowsPreview="True" />

            </Grid>
</Grid>

我想将网格中的thumbImgGrid移动保持高度和宽度不变(保持图像宽高比)

我按照以下方式行事,但在移动时无法保持高度和宽度相同。

在鼠标按下时,我计算了thumbImgGrid的左上角值

private void thumbImgGrid_MouseDown(object sender, MouseButtonEventArgs e)
        {

            startTopLeft = thumbImgGrid.TranslatePoint(new Point(0, 0), trackGrid);
            startRightBottom = new Point(startTopLeft.X + thumbImgGrid.ActualWidth, startTopLeft.Y + thumbImgGrid.ActualHeight);

            thumbImgGrid.CaptureMouse();

        }

鼠标移动功能,这里我得到当前的thumbGrid位置,得到新旧位置的点差,并用旧值加上或减去差值。

private void thumbImgGrid_MouseMove(object sender, MouseEventArgs e)
    {
        if (thumbImgGrid.IsMouseCaptured)
        {
            Vector offset = Point.Subtract(e.GetPosition(thumbGrid), startTopLeft);

            double newLeft = startTopLeft.X + offset.X;
            double NewTop = startTopLeft.Y + offset.Y;

            Point newRightBottom = new Point(newLeft + thumbImgGrid.ActualWidth, newLeft+ thumbImgGrid.ActualHeight);

            //thumbImgGrid.Margin = new Thickness(newLeft, NewTop, newRightBottom.X, newRightBottom.Y);

            _DataSource.ThumbSelectorLeftMargin = new GridLength(newLeft, GridUnitType.Star);
            //_DataSource.ThumbWidthSelector = new GridLength(thumbImgGrid.ActualWidth, GridUnitType.Star);
            //_DataSource.ThumbSelectorRightMargin = new GridLength(newLeft + thumbImgGrid.ActualWidth, GridUnitType.Star);

            _DataSource.ThumbSelectorTopMargin = new GridLength(NewTop, GridUnitType.Star);
            //_DataSource.ThumbHeightSelector = new GridLength(thumbImgGrid.ActualHeight, GridUnitType.Star);
           // _DataSource.ThumbSelectorBottomMargin = new GridLength(newLeft + thumbImgGrid.ActualHeight, GridUnitType.Star);

            _DataSource.UpdateThumbDimnsionLayout();
        }
    }

鼠标功能

private void thumbImgGrid_MouseUp(object sender, MouseButtonEventArgs e)
{
    thumbImgGrid.ReleaseMouseCapture();
}

我无法在鼠标移动时保持高度宽度不变。 提前谢谢。

0 个答案:

没有答案