CODEWITHSUNDEEP
c#uwpuwp-xaml
YellowPill
YellowPill

Reputation: 155

How to get the Usercontrol to keep its size once put on the Page?

Im creating a UWP app. In the App I have created a Usercontrol that has a rectangle of a set size inside it. The size is 700x700. I have also set the Usercontrol to 700x700.

How I thought it would work is that when the developer places the Usercontrol onto the Page then a Usercontrol will appear with a size of 700x700.

However the Usercontrol is appearing with a size of 100x100!

This is the code from the Page after I double-clicked the Usercontrol in the Toolbar to add it to the Page.

<Custom:Control HorizontalAlignment="Left" Height="100" Margin="254,158,0,0" VerticalAlignment="Top" Width="100"/>

Note the Height and Width are 100x100!

I have set the Height and Width properties of the Usercontrol to 700x700 in the XAML and the class constructor. Nothing changes!

I have set the set the HorizontalAlignment and VerticalAlignment properties for all the Child controls in the Usercontrol. Nothing changes!

This is the Usercontrol XAML

<Usercontrol
    x:Class="Circles.CustomControls.Control"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Circles.CustomControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="700" Height="700">

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Canvas x:Name="Container" Background="Transparent" Width="700" Height="700" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Rectangle x:Name="Card" Stroke="Black" Width="700" Height="700" Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Canvas>
    </Grid>
</UserControl>

This is the Usercontrol code-behind

public sealed partial class Control : Usercontrol
{
   public Control()
   {
      this.InitializeComponent();
      this.Height = 700;
      this.Width = 700;
   }

}

I expect that when a developer places the Usercontrol onto the Page then a Usercontrol of size 700x700 will appear.

UPDATE 1 Here are some pictures

Image1 - This shows the issue with the bounding rectangle

Image2 - This show the DatePicker control

Both a Usercontrol and a Datepicker control where added to the Page in the same way.

Image1 is the Usercontrol

  1. The smaller rectangle 100x100
  2. The size in the control is set to 700x700 for both the Usercontrol and the Canvas
  3. Canvas size shows as 700x700
  4. VS properties windows show 100x100
  5. VS Page XAML shows Height and Width as 100x100

Image2 is the Datepicker

  1. The bounding rectangle follows the visible contours of the internal controls
  2. VS properties window has the default size set

@Nico Zhu - MSFT and @Faenrig - I hope this illustrates my issue. If what you have done is working then I would love to know what I have done wrong or am not doing 😁

Upvotes: 0

Views: 607

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

How to get the Usercontrol to keep its size once put on the Page?

The size of Usercontrol will be constrained by it's parent container. if the parent size was limited to 100*100, Your Usercontrol will be resized. so please edit the parent container.

<StackPanel Orientation="Vertical" Height="700" Width="700">
    <local:CustomLabel/>
</StackPanel>

Upvotes: 1

Related Questions