0

So I have a big Grid where I work with coordinates with margin.
Now I have a List with Icons (Images) that should be displayed at specific coordinates.
I use a ItemsControl with an DataTemplate with an Image in it to Display them.

My Problem is now that if I spawn the first Image, it is on the right spot but if I spawn now the next one, it will get displayed on the right X coordinate, but every time with an space between the first and the next one.

So my Question is: How can I display a List of Images, that gets bigger in runtime, with margin coordinates in my bigger Grid element? (And I dont want columns etc.)

Code for better understanding:

<Grid Width="4045" Height="2823">
    <ItemsControl Width="4045" Height="2823" ItemsSource="{Binding AllPoI, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" VerticalAlignment="Top" >
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type poi:PointOfInterest}">
                <Image Margin="{Binding MarginCoordinates}" Height="16" Width="16" HorizontalAlignment="Left" VerticalAlignment="Top" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Try with the comment from Clemens (This Works perfect, this is the Answere):

<Grid Width="4045" Height="2823">
    <ItemsControl Width="4045" Height="2823" ItemsSource="{Binding AllPoI, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" VerticalAlignment="Top" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding PosX}"/>
                <Setter Property="Canvas.Top" Value="{Binding PosY}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>    
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type poi:PointOfInterest}">
                <Image Height="16" Width="16"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    //This Canvas below gets the same coordinates as the newest Entry on my List. this Canvas is displayed on the correct Position, the list entry not.
    <Canvas Height="{Binding Gridsize, UpdateSourceTrigger=PropertyChanged}" Width="{Binding Gridsize, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Margin="{Binding GridSelectorPosition}" VerticalAlignment="Top"  Visibility="{Binding GridSelectorVisibility, Converter={StaticResource VisibleWhenBoolIsTrueConverter}}">
        <Rectangle Stroke="Red" Fill="Red" Opacity=".3" Width="{Binding Gridsize, UpdateSourceTrigger=PropertyChanged}" Height="{Binding Gridsize, UpdateSourceTrigger=PropertyChanged}"/>
    </Canvas>
</Grid>
SomePerson
  • 581
  • 1
  • 6
  • 18
  • Can you add an Image showing your problem? Check your Margin if that is what is causing the problem. – Prateek Shrivastava Jan 28 '19 at 08:23
  • 1
    You won't be using Margins for this. In order to place UI elements at absolute coordinates, use a Canvas as ItemsPanel and bind the Canvas.Left and Canvas.Top properties in an ItemContainerStyle. – Clemens Jan 28 '19 at 08:42
  • Ok I tried it but now it seems that if I add a new elemet to the list, it will get displayed relativ to the last element, not to the canvas itself. If I set the Y Position of the first element to 20, it will get displayed at 20. If I set the next element to 30, it will get displayed at 50 (20 + 30) and so on. The X Pos seems fine. The x and y Position in the element are also correct. – SomePerson Jan 28 '19 at 08:48
  • 1
    That doesn't sound like you have actually used a Canvas as `ItemsPanel` of the ItemsControl. – Clemens Jan 28 '19 at 08:56
  • I edit my question, I did it like this. – SomePerson Jan 28 '19 at 09:06
  • 1
    That is exactly how it should look like. Check the values of the PosY properties. As a note, it is pointless to set `UpdateSourceTrigger=PropertyChanged` on the ItemsSource Binding. UpdateSourceTrigger only has an effect on TwoWay or OneWayToSource Bindings. There should also be a Binding of the Image's `Source` property. – Clemens Jan 28 '19 at 09:21
  • Even if I set the same coordinates (PosY to 20) it will just displayed it at 20, 40, 60... I found also that the X pos is off if the space to the right boarder is bigger, like I if I set it on the far right side, it will be on the exact Point but if i move it 40px away from the right side, it will only be displayed at 20px. And also I draw a Little canvas on the same coordinates as I use for my newest entry in my list, but the canvas is displayed correctly with the posX and PosY. – SomePerson Jan 28 '19 at 09:31
  • I added the canvas and some viewmodel Code to the question. Maybe something is wrong there. – SomePerson Jan 28 '19 at 09:47
  • Ok I got whats wrong. Your answere worked perfectly. My Visual Studio has not compiled my Code, even after I manually compiled it. I had to restart my pc and recompile the whole Project to get it to run. Thank for your help! – SomePerson Jan 28 '19 at 09:54

0 Answers0