1

I am developing a UserControl that consists of a block with a heading and a list of items (ItemsControl). The problem is that the user control contents gets clipped off when I dynamically add the usercontrol to a canvas as shown below. I am not setting a size for the usercontrol internally. What can be done to avoid this.

Clipping is happening even when I drag and drop the usercontrol to canvas. I need the contents to get scaled.

<UserControl x:Class="MyTools.MyControl"
       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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       DataContext="{Binding RelativeSource={RelativeSource Self}}">    
    <Grid x:Name="LayoutRoot" Background="White">
        <Border Name="MainBorder" CornerRadius="5" BorderThickness="2" BorderBrush="Black">
        <Grid  Name="grid1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
           <Grid.RowDefinitions>
                <RowDefinition Height="34" />
                <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <Grid Name="titleGrid" Grid.Row="0" Background="#FF727272">
              <TextBlock Name="titleText" HorizontalAlignment="Center" Text="{Binding ControlName}" VerticalAlignment="Center" FontSize="13" FontWeight="Bold" Foreground="Beige" />
            </Grid>
           <Grid Name="gridpr" Grid.Row="1" Background="#12C48F35">
           <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Border Name="borderPr"  CornerRadius="3" Margin="10"  BorderThickness="1" BorderBrush="LightGray" Grid.Row="0">
                <Grid Name="gridPr" Background="#FFC1C1C1" MouseLeftButtonUp="gridPr_MouseLeftButtonUp">
                    <StackPanel>
                        <TextBlock  HorizontalAlignment="Center" Name="txtPr" Text="SubItems" VerticalAlignment="Center" Foreground="#FF584848" FontSize="12" />
                        <ItemsControl x:Name="pitems" ItemsSource="{Binding MyItems}" >
                            <ItemsControl.ItemTemplate>
                            <DataTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="15,0,0,0">
                                <TextBlock Text="{Binding MyVal}" />
                            </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </Grid>
            </Border>
        </Grid>
        </Grid>
        </Border>
    </Grid>
 </UserControl> 

Code-behind for UserControl:

namespace MyTools
{
    public partial class MyControl : UserControl
    {
        public MyControl()
        {
            InitializeComponent();
        }

        public string ControlName { get; set; } 
        public object MyItems { get; set; }

        public class Row
        {
            public string MyVal { get; set; }                  
        }

        protected override Size MeasureOverride(Size availableSize)
        {
            var desiredSize = base.MeasureOverride(availableSize);
            var sideLength = Math.Min(desiredSize.Width, desiredSize.Height);

            desiredSize.Width = sideLength;
            desiredSize.Height = sideLength;

            return desiredSize;
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            var sideLength = Math.Min(this.DesiredSize.Width, this.DesiredSize.Height);
            return base.ArrangeOverride(new Size(sideLength, sideLength));
        } 

        private void gridPr_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            pitems.Visibility = pitems.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible; 
        }
    }
}

Host Client Code:

namespace TestProject
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            MyControl control1 = new MyControl();            
            control1.ControlName = "Test Name";

            var test = new List<MyControl.Row>(
              new MyControl.Row[] 
                { 
                    new MyControl.Row {MyVal = "Item1"}, 
                    new MyControl.Row {MyVal = "Item2"}, 
                    new MyControl.Row {MyVal = "Item3"}
                });

            control1.MyItems = test;

             control1.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
             MessageBox.Show(control1.DesiredSize.Height.ToString());

            canvas1.Children.Add(control1);
        }
    }
}

Layout of host:

<UserControl x:Class="TestProject.MainPage"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="503" d:DesignWidth="758" xmlns:my="clr-namespace:MyTools">
    <Grid x:Name="LayoutRoot" Background="White" Height="507" Width="757">
        <Canvas Height="503" Name="canvas1" HorizontalAlignment="Left" Margin="-1,-1,0,0" VerticalAlignment="Top" Width="758">               
        </Canvas>
    </Grid>
</UserControl>

EDIT: Turns out that the issue is because of MeasureOverride. The clipping is not there when I removed it. Thanks for the suggestions.

blitzkriegz
  • 9,258
  • 18
  • 60
  • 71
  • 1
    Your Control is working for me with no problems without the Bindings. What type of container are you inserting into? – Mark Hall Jan 13 '12 at 01:56
  • It is a list. Even when I add 3 items (as shown in edited question), it clips after one item. The problem is that when I dynamically add, the contents of the usercontrol does not stretch to the size of the client usercontrol. – blitzkriegz Jan 13 '12 at 02:19
  • 1
    Can you show us the XAML for the ItemsControl which you are adding the user control to? – Caleb Vear Jan 13 '12 at 02:32
  • Actually I am not adding UserControl to ItemsControl. My usercontrol has an ItemsControl within that is bound to a List property. I am binding it to a list is as shown above in the Client code. – blitzkriegz Jan 13 '12 at 02:35
  • The `ItemsControl` I mentioned is of the name `pitems` in the XAML of UserControl. – blitzkriegz Jan 13 '12 at 02:36
  • 1
    I think what we need is the layout your adding the usercontrol to. I'm assuming it's a problem in the parent control xaml – MyKuLLSKI Jan 13 '12 at 02:58
  • 1
    Also I would like to see the code behind for the UserControl. I've just wiped up a little solution where to try and replicate what you are doing and it works without clipping. – Caleb Vear Jan 13 '12 at 03:05
  • @MyKuLLSKI Updated question with layout of host – blitzkriegz Jan 13 '12 at 03:27
  • @CalebVear Adding code behind – blitzkriegz Jan 13 '12 at 03:27
  • @CalebVear Turns out the problem is because of my override functions. I need to find the rendered size of the user control to draw lines between them. How to fix my MeasureOverride? – blitzkriegz Jan 13 '12 at 03:32
  • What were you trying to achieve with your MeasureOverride? Did you just want to make the control square? – Caleb Vear Jan 18 '12 at 01:12

0 Answers0