WPF: cannot set margin properly

Question

I try to make a simple map application. When I put some pins (markers) at this map and adjust their position with margin, they are not displaying properly. Here is my code:

Marker.xaml:

<UserControl
x:Class="GothicMapViewer.Marker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:GothicMapViewer"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="15"
d:DesignWidth="15"
mc:Ignorable="d">

<Grid>
    <Ellipse
        Name="MarkerPoint"
        Width="15"
        Height="15"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Fill="#FFF4F4F5"
        Stroke="Black" />
</Grid>

MapViewModel.cs:

private void SetMarkerData(MapType mapType)
    {
        var markersData = mapRepository.GetMarkers(mapType);

        foreach (var item in markersData.Herbs)
        {
            Markers.Add(new MarkerViewModel()
            {
                Margin = new Thickness(item.PositionX, item.PositionY, 0, 0),
            });
        }
    }

Map.xaml:

<UserControl
x:Class="GothicMapViewer.Map"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:GothicMapViewer"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="750"
d:DesignWidth="1000"
DataContext="{Binding MapViewModel, Source={StaticResource Locator}}"
mc:Ignorable="d">
<Grid>

    <ItemsControl ItemsSource="{Binding Markers}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button ToolTip="{Binding NameWithDescription}">
                    <Button.Template>
                        <ControlTemplate>
                            <local:Marker Margin="{Binding Margin}" />
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Data from SetMarkerData() goes well, I can see proper values at Margin property of every marker. My sample values are (10,10), (50,50), (100,100), etc. so they should be all in a straight line. Instead I'm getting this:

Markers img

I think problem is in Map.xaml, but I simply cannot identify it. Thanks for help

To position something precisely I'd except to see at least `Canvas`. Refer to [this great answer](https://stackoverflow.com/a/22325266/1997232) of how to position children. — Sinatr, Aug 31 '20 at 09:31
The default ItemsPanel is a StackPanel, so your Marker controls are stacked vertically. You probably want a Grid or Canvas as ItemsPanel — Klaus Gütter, Aug 31 '20 at 09:32
See the answer to the duplicate question, and replace Rectangles with Ellipses. In order to draw ellipses centered, better use Paths with EllipseGeometries, instead of top/left aligned Ellipses. — Clemens, Aug 31 '20 at 09:33

WPF: cannot set margin properly

0 Answers0