Home > Software design >  Limit element movement in WPF
Limit element movement in WPF

Time:11-23

how can I limit elements movement?

Once I write a value in TextBox for element position (x, y value) the object is moving to that position.

I want to limit the movement, for Example: AuslegerProzess (name of the element) maximal position movement x = 480, minimal position movement x = 375 and also that I can move it to the positions inbetween 375 and 480.

**Here is my XAML: **

d:DesignHeight="600" d:DesignWidth="1000">

    <Canvas x:Name="canvas" Margin="0,0,-163,-83">

        <Path x:Name="AuslegerProzess" Fill="#FFB3B3B3" StrokeThickness="1.6705512" Stroke="#FF000000" StrokeMiterLimit="4" Data="M 178.83594 375.22266 L 178.83594 382.85742 L 168.51172 382.85742 L 168.51172 389.43555 L 163.51172 389.43555 L 163.51172 432.69531 L 168.51172 432.69531 L 168.51172 448.57227 L 178.83594 448.57227 L 178.83594 466.27344 L 178.83594 471.98242 L 150.82031 471.98242 L 150.82031 480.24805 L 136.57812 480.24805 L 136.57812 564.00391 L 331.24805 564.00391 L 331.24805 480.24805 L 317.60742 480.24805 L 317.60742 471.98242 L 291.99023 471.98242 L 291.99023 466.27344 L 291.99023 448.57227 L 701.44531 448.57227 L 701.44531 382.85742 L 291.99023 382.85742 L 291.99023 375.22266 L 178.83594 375.22266 z " Canvas.Left="{Binding PositionX, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Canvas.Top="{Binding PositionY, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Height="133.144" Stretch="Fill" Width="663.163" >
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path x:Name="ClampRechts" Fill="#FF000000" StrokeThickness="2.12787" Data="M 524.2207 473.57227 L 524.2207 563.57227 L 137.14258 563.57227 L 137.14258 652.14258 L 571.42773 652.14258 L 571.42773 563.57227 L 571.36328 563.57227 L 571.36328 473.57227 L 524.2207 473.57227 z " Height="68.929" Stretch="Fill" Width="79.7" Canvas.Left="411.15" Canvas.Top="339.369">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path x:Name="ClampLinks"  Fill="#FF000000" StrokeThickness="2.12787" Data="M 110 344.28516 L 110 434.28516 L 110 485.71484 L 110 522.85742 L 544.28516 522.85742 L 544.28516 434.28516 L 157.14258 434.28516 L 157.14258 344.28516 L 110 344.28516 z " Height="68.668" Stretch="Fill" Width="80.733" Canvas.Left="377.134" Canvas.Top="339.499">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>

        <Rectangle Canvas.Left="735" Width="150" Height="449" x:Name="rect10_Copy" Fill="#FFB3B3B3" StrokeThickness="0.264583" Canvas.Top="74"/>


        <TextBox Height="30" Canvas.Left="109" TextWrapping="Wrap" Canvas.Top="260" Width="120" FontSize="20" Text="{Binding PositionX, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

        <Label Content="X Position" Canvas.Left="14" Canvas.Top="262" FontWeight="Bold" FontSize="15"/>

        <Label Content="Ausleger Prozess" Canvas.Left="10" Canvas.Top="218" FontWeight="Bold" FontSize="20" Height="38" Width="180"/>





        <TextBox Name="TxtBoxY" Height="30" Canvas.Left="105" TextWrapping="Wrap" Canvas.Top="142" Width="120" FontSize="20" Text="{Binding PositionY, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" UndoLimit="600"/>

        <Label Content="Y Position" Canvas.Left="10" Canvas.Top="142" FontWeight="Bold" FontSize="15"/>

        <Button Content="START" Canvas.Left="84" Canvas.Top="403" Width="106" Height="48" FontSize="30" FontWeight="Bold" Name="BtnStart" Command="{Binding ClickCommand, UpdateSourceTrigger=PropertyChanged}"/>


        <Path Name="Lift" Fill="#FF808080" Data="m 67.621819 110.44866 v 16.55811 H 176.13074 v -16.55811 z m 0.143117 16.70929 v 1.59777 h 0.743496 v 4.86682 h 18.534155 v -4.86682 H 140.4094 v 4.84489 h 18.53416 v -4.84489 h 17.04716 v -1.59777 z m 93.167904 1.59774 c 0.10872 56.40049 0.026 57.01222 0.026 57.01222 l 15.18908 17.62703 -0.005 -74.7721 -15.21024 0.13288" Canvas.Left="549" Canvas.Top="{Binding PositionY, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Height="135.111" Stretch="Fill" Width="185.378"/>
        <Label Content="LIFT" Canvas.Left="10" Canvas.Top="101" FontWeight="Bold" FontSize="20" Height="36" Width="52"/>

    </Canvas>

    <UserControl.DataContext>
        <viewmodel:ProzessViewModel/>
    </UserControl.DataContext>
</UserControl>

Here is my ViewModel:

public class ProzessViewModel : BaseViewModel
    {
        private ICommand _clickCommand;
        private double _positionX = 375;
        private double _positionY = 303.707;



        

        public double PositionX
        {
            get { return _positionX; }
            set
            {
                _positionX = value;
                RaisePropertyChanged("PositionX");

                

            }
        }

        public double PositionY
        {
            get { return _positionY; }
            set
            {
                _positionY = value;
                RaisePropertyChanged("PositionY");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }

       

        public ICommand ClickCommand { get; set; }

I searched in Internet and I found few examples, but it didn't work.

CodePudding user response:

You can just add your conditions on PositionX

public double PositionX
{
    get { return _positionX; }
    set
    {
        if(value >= 375 && value <= 480)// put an necessary condition here
        {
            _positionX = value;
            RaisePropertyChanged("PositionX");
        }
    }
}

Edit : Regarding your comment, the problem is you have a UpdateSourceTrigger=PropertyChanged on your TextBox, so the Binding will update PositionX evrytime you edit the text in CheckBox. The easiest would be to remove that UpdateSourceTrigger=PropertyChanged. If you want to keep it (change position inmediately, without going out from TextBox, you need to define a second parameter :

PositionX1 is the position you bind your TextBox with, it will be changed everytime you edit the CheckBox (of course you need to check that user don't put some text insde).

public double PositionX1
{
    get { return _positionX1; }
    set
    {
        {
            _positionX = value;
            PositionX2 = _positionX;
            RaisePropertyChanged("PositionX1");
        }
    }
}

PositionX2 will be the one to bind your Canvas

public double PositionX2
{
    get { return _positionX2; }
    set
    {
        if(value >= 375 && value <= 480)// put an necessary condition here
        {
            _positionX = value;
            RaisePropertyChanged("PositionX2");
        }
    }
}

Like that, PositionX2 will be updated only when you will have in your textbox somthing between 375 and 480.

  • Related