Continuous (Edge-to-Edge) Rectangles in WPF overlaps each other

Question

I am using WPF component in my project in which there is a feature of creating rectangles with the input given as a list containing <x,y> for aligning rectangle over a canvas. I have given 0.5 stroke thickness to the rectangle but not any margin or border between the plotting but still these rectangles are not aligning smoothly , you can see the image attached.

enter image description here

Code

<ItemsControl ItemsSource="{Binding RectangleData}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Height="{Binding ActualHeight, ElementName=8}"
                                Width="{Binding ActualWidth, ElementName=myPlotRect}"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Style>
                    <Style>
                        <Setter Property="Canvas.Right" Value="0"/>
                        <Setter Property="Canvas.Bottom" Value="0"/>
                    </Style>
                </ItemsControl.Style>
                <ItemsControl.ItemContainerStyle >
                    <Style>
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="plotLineViewModel:RectangleDataType">
                        <Canvas Height="{Binding ActualHeight, ElementName=PlotArea}">                               
                            <Rectangle Fill= "Blue" 
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Top" 
                                       Opacity=".6" Stroke="Grey" StrokeThickness="0.5" 
                                       Height ="{Binding Path=ActualHeight, ElementName=RectangleData}">
                                <Canvas.Left>
                                    <MultiBinding Converter="{StaticResource  ChartViewXCordinateConverter}" >
                                        <Binding Path="ActualWidth" ElementName="RectangleData" />
                                        <Binding Path="Location.X" />
                                        <Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
                                        <Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
                                    </MultiBinding>
                                </Canvas.Left>
                                <Rectangle.Width>
                                    <MultiBinding Converter="{StaticResource  ChartViewXCordinateConverter}" >
                                        <Binding Path="ActualWidth" ElementName="RectangleData" />
                                        <Binding Path="Width" />
                                        <Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
                                        <Binding Path="DataContext.XAxisMin"  ElementName="XPosition"/>
                                    </MultiBinding>
                                </Rectangle.Width>
                            </Rectangle>
                        </Canvas>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

Here below i am trying stackpanel approach but the gaps are not coming properly?

enter image description here

Below is the code with StackPanel:

<ItemsControl.ItemTemplate>
                    <DataTemplate DataType="plotLineViewModel:HighLightRectType">
                        <StackPanel Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=PlotArea}">
                            <!--<TextBlock Name="TextBlock1"  TextAlignment="Center" Style="{StaticResource AxisValueStyle}" Text="{Binding Path=Label}"  >
                                <Canvas.Left>
                                <MultiBinding Converter="{StaticResource  HighlightRectTextPositionCalculator}" >
                                    <Binding Path="Label" />
                                    <Binding Path="Width" />
                                    <Binding Path="Location.X" />
                                    <Binding Path="ActualWidth" ElementName="myPlotRectangle" />
                                    <Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
                                    <Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
                                </MultiBinding>
                                </Canvas.Left>
                                <Canvas.Top>-30</Canvas.Top>
                            </TextBlock>-->
                            <StackPanel.Margin>
                                <MultiBinding Converter="{StaticResource  ChartViewXCordinateConverter}" >
                                    <Binding Path="ActualWidth" ElementName="myPlotRectangle" />
                                    <Binding Path="Location.X" />
                                    <Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
                                    <Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
                                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}" Path="DataContext.IsScalingRequired"  />
                                </MultiBinding>
                            </StackPanel.Margin>
                            <Rectangle Fill= "{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.FrameOverlayColor}" 
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Top" 
                                       Opacity=".6"  
                                       Height ="{Binding Path=ActualHeight, ElementName=myPlotRectangle}">
                                <!--<Canvas.Left>
                                    <MultiBinding Converter="{StaticResource  ChartViewXCordinateConverter}" >
                                        <Binding Path="ActualWidth" ElementName="myPlotRectangle" />
                                        <Binding Path="Location.X" />
                                        <Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
                                        <Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
                                    </MultiBinding>
                                </Canvas.Left>-->
                                <Rectangle.Width>
                                    <MultiBinding Converter="{StaticResource  ChartViewXCordinateConverter}" >
                                        <Binding Path="ActualWidth" ElementName="myPlotRectangle" />
                                        <Binding Path="Width" />
                                        <Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
                                        <Binding Path="DataContext.XAxisMin"  ElementName="XPosition"/>
                                    </MultiBinding>
                                </Rectangle.Width>
                            </Rectangle>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

Also while resizing the content the width and ActualWidth rendered mismatched, dont know how to fix it? — Divya Prakash, Oct 14 '22 at 18:33
The itemcontainer is the parent of your item. It is there that you need to bind canvas.left and canvas.top. I don't see why you need that canvas in the itemtemplate. — Andy, Oct 15 '22 at 13:23
You must remove the Canvas from the DataTemplate. Then move the positioning to the ItemContainerStyle. Set the binding on the Canvas.Left and Canvas.Top using the style setters. You must know that the DataContext inside the ItemContainerStyle is the data object (same as in the DataTemplate). — BionicCode, Oct 15 '22 at 14:15
The point is, you want to position the item containers on the Canvas ItemPanel and not the container content inside the item container. — BionicCode, Oct 15 '22 at 14:16
The reason it "works" at all at the moment is because each itemcontainer will fill the parent canvas, the canvas in each itemcontainer will fill that. So following my advice will neaten things up and reduce the likelihood of unwanted side effects. But all that's a bit pointless if you just want a horizontal stack of rectangles. Hosting in a stackpanel would be simpler. — Andy, Oct 15 '22 at 15:29
I tried stack panel still messed up, actually i dont know why while resizing the UI is breaking up — Divya Prakash, Oct 17 '22 at 06:09
Also Can you elaborate more or write down the code to understand better as i am very new to WPF — Divya Prakash, Oct 17 '22 at 06:13

Continuous (Edge-to-Edge) Rectangles in WPF overlaps each other

0 Answers0