locked
Add and remove objects RRS feed

  • Question

  • I have a grid that contains several Ellipse objects.   I use the MouseDragElementBehavior with the ConstrainToParentBounds="True"  so I can move these around the grid.   I want to add a New and Delete button that will add another Ellipse to the grid duplicating the ones I already have or delete one.

    This is just a sketchflow prototype so I just want to keep this simple.  Is there an easy way to do this?

    		<Grid Margin="55,33.523,32.275,25">
    					<Ellipse HorizontalAlignment="Left" Height="41.982" Margin="45,280,0,0" Stroke="#FF0FF3DF" VerticalAlignment="Top" Width="45" StrokeThickness="4" Fill="#7F1EEAEA">
    						<i:Interaction.Behaviors>
    							<ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    						</i:Interaction.Behaviors>
    					</Ellipse>
    					<Ellipse HorizontalAlignment="Left" Height="41.982" Margin="165,258.018,0,0" Stroke="#FF0FF3DF" VerticalAlignment="Top" Width="45" StrokeThickness="4" Fill="#7F1EEAEA">
    						<i:Interaction.Behaviors>
    							<ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    						</i:Interaction.Behaviors>
    					</Ellipse>
    					<Ellipse HorizontalAlignment="Left" Height="41.982" Margin="285,200,0,0" Stroke="#FF0FF3DF" VerticalAlignment="Top" Width="45" StrokeThickness="4" Fill="#7F1EEAEA">
    						<i:Interaction.Behaviors>
    							<ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    						</i:Interaction.Behaviors>
    					</Ellipse>
    					<Ellipse Height="41.982" Margin="0,204.287,365,0" Stroke="#FF0FF3DF" VerticalAlignment="Top" StrokeThickness="4" Fill="#7F1EEAEA" HorizontalAlignment="Right" Width="45">
    						<i:Interaction.Behaviors>
    							<ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    						</i:Interaction.Behaviors>
    					</Ellipse>
    					<Ellipse Height="41.982" Stroke="#FF0FF3DF" VerticalAlignment="Top" StrokeThickness="4" Fill="#7F1EEAEA" HorizontalAlignment="Right" Width="45" Margin="0,188.018,25,0">
    						<i:Interaction.Behaviors>
    							<ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    						</i:Interaction.Behaviors>
    					</Ellipse>
    					<Ellipse Height="41.982" Margin="0,210.873,180,0" Stroke="#FF0FF3DF" VerticalAlignment="Top" StrokeThickness="4" Fill="#7F1EEAEA" HorizontalAlignment="Right" Width="45">
    						<i:Interaction.Behaviors>
    							<ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
    						</i:Interaction.Behaviors>
    					</Ellipse>
    				</Grid>
    


    Jeff Davis

    Thursday, April 18, 2013 10:28 PM

Answers

  • Give your grid an x:Name="NameHere", then you can access it in code, Grid has a children collection, so something like:

    var e = new Ellipse();

    e.Property1 = value1;

    e.Property2 = value2;

    this.NameHere.Children.Add(e);

    • Marked as answer by JeffD503 Saturday, April 20, 2013 2:03 AM
    Friday, April 19, 2013 2:41 PM
    Moderator
  • Took me a while to figure this all out but I got it working.   Had some difficulty figuring out how to assign the mousemove behavior and also just getting the hex color values assigned.   The Delete button ended up being simpler.

    Here is the code.

      Private Sub NewEQ_Click(sender As Object, e As RoutedEventArgs)
    		Dim el = new Ellipse()
    		Dim brush As New SolidColorBrush()
    		Dim dragBehavior As New Microsoft.Expression.Interactivity.Layout.MouseDragElementBehavior()
    		
    		el.Height=42
    
    		brush = New SolidColorBrush(CType(ColorConverter.ConvertFromString("#FF0FF3DF"), Color))
     		el.Stroke= brush
    
    		el.Width=45
    		el.StrokeThickness=4
    	    
    		brush = New SolidColorBrush(CType(ColorConverter.ConvertFromString("#7F1EEAEA"), Color))
    		el.Fill= brush
    	
    		el.HorizontalAlignment=Windows.HorizontalAlignment.Left
    		el.VerticalAlignment=Windows.VerticalAlignment.Top
    				
    		me.EQGraph.Children.Add(el)
    		dragBehavior.ConstrainToParentBounds=True
    		dragBehavior.Attach(el)
    		
        End Sub
    
       Private Sub DeleteEQ_Click(sender As Object, e As RoutedEventArgs)
    		if me.EQGraph.Children.Count > 0 then
    			me.EQGraph.Children.RemoveAt(me.EQGraph.Children.Count-1)
    		end if
       End Sub

     

    Jeff Davis


    • Edited by JeffD503 Friday, April 19, 2013 4:47 PM
    • Marked as answer by JeffD503 Saturday, April 20, 2013 2:03 AM
    Friday, April 19, 2013 4:44 PM

All replies

  • The simplest way for a prototype is to just create the buttons with an event handler that adds the new items via code.
    Friday, April 19, 2013 2:33 AM
    Moderator
  • Can I get a hint on how this is done?   Also in my example above I have defined 6 Ellipse objects with specific placement that are basically all the same size/color and are dragable. What is the syntax for making these all part of a single collection so I can just add or remove one in code?


    Jeff Davis

    Friday, April 19, 2013 2:39 PM
  • Give your grid an x:Name="NameHere", then you can access it in code, Grid has a children collection, so something like:

    var e = new Ellipse();

    e.Property1 = value1;

    e.Property2 = value2;

    this.NameHere.Children.Add(e);

    • Marked as answer by JeffD503 Saturday, April 20, 2013 2:03 AM
    Friday, April 19, 2013 2:41 PM
    Moderator
  • Took me a while to figure this all out but I got it working.   Had some difficulty figuring out how to assign the mousemove behavior and also just getting the hex color values assigned.   The Delete button ended up being simpler.

    Here is the code.

      Private Sub NewEQ_Click(sender As Object, e As RoutedEventArgs)
    		Dim el = new Ellipse()
    		Dim brush As New SolidColorBrush()
    		Dim dragBehavior As New Microsoft.Expression.Interactivity.Layout.MouseDragElementBehavior()
    		
    		el.Height=42
    
    		brush = New SolidColorBrush(CType(ColorConverter.ConvertFromString("#FF0FF3DF"), Color))
     		el.Stroke= brush
    
    		el.Width=45
    		el.StrokeThickness=4
    	    
    		brush = New SolidColorBrush(CType(ColorConverter.ConvertFromString("#7F1EEAEA"), Color))
    		el.Fill= brush
    	
    		el.HorizontalAlignment=Windows.HorizontalAlignment.Left
    		el.VerticalAlignment=Windows.VerticalAlignment.Top
    				
    		me.EQGraph.Children.Add(el)
    		dragBehavior.ConstrainToParentBounds=True
    		dragBehavior.Attach(el)
    		
        End Sub
    
       Private Sub DeleteEQ_Click(sender As Object, e As RoutedEventArgs)
    		if me.EQGraph.Children.Count > 0 then
    			me.EQGraph.Children.RemoveAt(me.EQGraph.Children.Count-1)
    		end if
       End Sub

     

    Jeff Davis


    • Edited by JeffD503 Friday, April 19, 2013 4:47 PM
    • Marked as answer by JeffD503 Saturday, April 20, 2013 2:03 AM
    Friday, April 19, 2013 4:44 PM
  • Still would like to see a way to do this all in XAMLusing Interaction.Triggers for a button?


    Jeff Davis

    Saturday, April 20, 2013 3:02 AM
  • If you put your code into an action, then you could use a trigger/action combo. But there isn't anything magical about behaviors/actions/triggers, they just run the bits of code specified in them. I don't know of any prewritten actions to do what you want.
    Saturday, April 20, 2013 12:04 PM
    Moderator