locked
Change Image position on WPF window RRS feed

  • Question

  • I have a simple image with fixed size, in the code i want to change the position of the image to place it on different place. Is there any other way than changing the margin thickness, because this needs the value for distance from bottom and right sides too. How can I change position according only the top and left distance values? 
    • Moved by Mike Danes Monday, June 8, 2015 4:49 AM wpf specific
    Sunday, June 7, 2015 8:07 PM

Answers

  • Imagine the rectangle is an image, same principle but you can paste code easier.

        <Grid>
            <Rectangle Width="200" Height="50" Fill="Blue">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding MyXValue}" Y="{Binding MyYValue}" />
                </Rectangle.RenderTransform>
            </Rectangle>
    
            <Button HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="Button_Click">Move</Button>
        </Grid>
    </Window>

    Code behind

    	public partial class MainWindow : Window, INotifyPropertyChanged
    	{
    
            private double myXValue = 0;
    
            public double MyXValue
            {
                get { return myXValue; }
                set { myXValue = value; NotifyPropertyChanged(); }
            }
            private double myYValue = 0;
    
            public double MyYValue
            {
                get { return myYValue; }
                set { myYValue = value; NotifyPropertyChanged(); }
            }
    		
    		public MainWindow()
    		{
    			InitializeComponent();
                DataContext = this;
                //
    
            }
            public event PropertyChangedEventHandler PropertyChanged;
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                MyYValue += 50;
            }
        }


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles


    • Edited by Andy ONeill Monday, June 8, 2015 9:52 AM
    • Proposed as answer by Barry Wang Tuesday, June 9, 2015 3:22 AM
    • Marked as answer by Barry Wang Tuesday, June 16, 2015 3:39 AM
    Monday, June 8, 2015 9:51 AM
  • thanks, as I guess the canvas is my solution. 

    Moving it dynamically is just a matter of changing its Canvas.Left and Canvas.Top attached property values programmatically:

    Canvas.SetLeft(img, 20);
          Canvas.SetTop(img, 50);

    You could for example do this in a button click event handler or whevever it makes sense in your code.

    Please remember to close your threads by marking helpful posts that provide a solution to your issue as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.


    • Edited by Magnus (MM8)MVP Monday, June 8, 2015 10:11 AM
    • Proposed as answer by Barry Wang Tuesday, June 9, 2015 3:22 AM
    • Marked as answer by Barry Wang Tuesday, June 16, 2015 3:39 AM
    Monday, June 8, 2015 10:11 AM

All replies

  • How about passing a transform object into it? (Use TranslateTransform to move object along X and Y axis)
    Monday, June 8, 2015 1:33 AM
  • Better ask WPF questions in the WPF Forum.

    But as cheong00 says, transforms have been added to WPF to support these very simple animations. Code is unessesary, XAML can deal with it (and should deal with it).

    Monday, June 8, 2015 2:47 AM
  • It would have been an idea to explain the purpose of moving this image.

    If it's supposed to travel slowly from one place to another fixed place then a storyboard with a translatetransform is your best bet.

    Which in turn raises why you should ask a question in the technology specific forum.

    Storyboards have to be freezable and so if you wanted to change where it's going based on some criteria then that is a bit of a complication for a storyboard.

    You can create them dynamically to handle such aspects.

    http://social.technet.microsoft.com/wiki/contents/articles/28797.wpf-dynamic-xaml.aspx#Changing_the_Unchangeable

    Or you could get a reference to the storyboard and change values on the to/from in the animation within it.

    XMoveSB = Application.Current.Resources["XMoveStoryboard"] as Storyboard;
    XAnimation = XMoveSB.Children[0] as DoubleAnimation;
    XAnimation.To = 99.9; 

    If you instead wanted it to just more then you could set or bind the margin. The thickness is a bit tricky to work with.

    http://stackoverflow.com/questions/6249518/binding-only-part-of-the-margin-property-of-wpf-control

    You might find it more convenient to lay your window out using a grid with row and column definitions.

    You can then move the image from one row/column to another.

    Setting grid.row is a bit odd because it's an attached property:

    Grid.SetRow(myImage, 3);

    https://msdn.microsoft.com/en-us/library/cc190424(v=vs.95).aspx

    Note that Grid is literally grid, you're using a method of the grid class.

    And.... of course there is also a setcolumn.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Monday, June 8, 2015 8:07 AM
  • >>How can I change position according only the top and left distance values?

    If you put the Image in a Canvas, which is the panel to use when you want to be able to explicitly position child elements by using coordinates, you could simply set the Canvas.Left and Canvas.Top attached properties of it to change its position within the Canvas:

            
            <Canvas Width="200" Height="200">
                <Image Source="img.png" x:Name="img" Canvas.Left="20" Canvas.Top="50"/>
            </Canvas>


          Canvas.SetLeft(img, 20);
          Canvas.SetTop(img, 50);

    Othwerwise you could use the Margin property or a TranslateTransform as suggested by cheong00.

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

     

    Monday, June 8, 2015 9:34 AM
  • thanks for reply, but I don't really understand how it works? can you give me example? like there is an image object called img, how will u move it 5 pixel to the right?
    Monday, June 8, 2015 9:39 AM
  • yes but i want to move object dynamically, how should i do it? please give me example. Thank you
    Monday, June 8, 2015 9:40 AM
  • thank you, all of that is really understandable. Sorry for not explaining purpose. I just want to change the position of image on the grid, without animations. How to do that in the simplest way? to change just x and y, nothing else
    Monday, June 8, 2015 9:44 AM
  • thanks, as I guess the canvas is my solution. 
    Monday, June 8, 2015 9:46 AM
  • Imagine the rectangle is an image, same principle but you can paste code easier.

        <Grid>
            <Rectangle Width="200" Height="50" Fill="Blue">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding MyXValue}" Y="{Binding MyYValue}" />
                </Rectangle.RenderTransform>
            </Rectangle>
    
            <Button HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="Button_Click">Move</Button>
        </Grid>
    </Window>

    Code behind

    	public partial class MainWindow : Window, INotifyPropertyChanged
    	{
    
            private double myXValue = 0;
    
            public double MyXValue
            {
                get { return myXValue; }
                set { myXValue = value; NotifyPropertyChanged(); }
            }
            private double myYValue = 0;
    
            public double MyYValue
            {
                get { return myYValue; }
                set { myYValue = value; NotifyPropertyChanged(); }
            }
    		
    		public MainWindow()
    		{
    			InitializeComponent();
                DataContext = this;
                //
    
            }
            public event PropertyChangedEventHandler PropertyChanged;
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                MyYValue += 50;
            }
        }


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles


    • Edited by Andy ONeill Monday, June 8, 2015 9:52 AM
    • Proposed as answer by Barry Wang Tuesday, June 9, 2015 3:22 AM
    • Marked as answer by Barry Wang Tuesday, June 16, 2015 3:39 AM
    Monday, June 8, 2015 9:51 AM
  • thanks, as I guess the canvas is my solution. 

    Moving it dynamically is just a matter of changing its Canvas.Left and Canvas.Top attached property values programmatically:

    Canvas.SetLeft(img, 20);
          Canvas.SetTop(img, 50);

    You could for example do this in a button click event handler or whevever it makes sense in your code.

    Please remember to close your threads by marking helpful posts that provide a solution to your issue as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.


    • Edited by Magnus (MM8)MVP Monday, June 8, 2015 10:11 AM
    • Proposed as answer by Barry Wang Tuesday, June 9, 2015 3:22 AM
    • Marked as answer by Barry Wang Tuesday, June 16, 2015 3:39 AM
    Monday, June 8, 2015 10:11 AM