Divya Prakash
Divya Prakash

Reputation: 1

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

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

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>

Upvotes: 0

Views: 55

Answers (0)

Related Questions