Dynamic Viewbox not Stretching

Question

In my earlier example of Input Box, I have a window variable. I created some controls(Textbox, Label, Buttons). Parent of these controls is canvas. Parent of canvas is a ViewBox (because ViewBox can only contain one child) and parent of ViewBox is the window. So hierarchy is like Window->Viewbox->Canvas-> Controls. All these control creation and parenting is done dynamically.

        winInputDialog = new Window();
        lblPrompt = new Label();
        btnOK = new Button();
        btnCancel = new Button();
        txtInput = new TextBox();
        cvContainer = new Canvas();
        VB = new Viewbox();

        // 
        // lblPrompt
        // 
        lblPrompt.Background = new SolidColorBrush(SystemColors.ControlColor);
        lblPrompt.FontFamily = new FontFamily("Microsoft Sans Serif");
        lblPrompt.FontSize = 12;
        lblPrompt.Background = new SolidColorBrush(Colors.Transparent);
        lblPrompt.FontStyle = FontStyles.Normal;
        lblPrompt.Margin = new Thickness(8, 9, 0, 0);
        lblPrompt.Name = "lblPrompt";
        lblPrompt.Width = 302;
        lblPrompt.Height = 82;
        lblPrompt.TabIndex = 3;
        // 
        // btnOK
        // 
        btnOK.Margin = new Thickness(322, 8, 0, 0);
        btnOK.Name = "btnOK";
        btnOK.Width = 64;
        btnOK.Height = 24;
        btnOK.TabIndex = 1;
        btnOK.Content = "OK";
        btnOK.Click += new RoutedEventHandler(btnOK_Click);
        // 
        // btnCancel
        //          
        btnCancel.Margin = new Thickness(322, 40, 0, 0);
        btnCancel.Name = "btnCancel";
        btnCancel.Width = 64;
        btnCancel.Height = 24;
        btnCancel.TabIndex = 2;
        btnCancel.Content = "Cancel";
        btnCancel.Click += new RoutedEventHandler(btnCancel_Click);
        // 
        // txtInput
        // 
        txtInput.Margin = new Thickness(8, 70, 0, 0);
        txtInput.Name = "txtInput";
        txtInput.Width = 379;
        txtInput.Height = 25;
        txtInput.TabIndex = 0;
        //
        //Canvas
        //

        double width = System.Windows.SystemParameters.PrimaryScreenWidth / 3, height = System.Windows.SystemParameters.PrimaryScreenHeight / 4;

        cvContainer.Height = height;
        cvContainer.Width = width;

        cvContainer.Children.Add(txtInput);
        cvContainer.Children.Add(btnCancel);
        cvContainer.Children.Add(btnOK);
        cvContainer.Children.Add(lblPrompt);
        cvContainer.ClipToBounds = true;
        //
        //ViewBox
        //            
        VB.Stretch = Stretch.Fill;
        VB.Child = cvContainer;
        // 
        // InputBoxDialog
        //
        winInputDialog.Width = width;
        winInputDialog.Height = height;            
        winInputDialog.Content = VB;
        winInputDialog.Icon = new System.Windows.Media.Imaging.BitmapImage(new System.Uri(System.IO.Directory.GetCurrentDirectory() + @"\drop-box-icon.png"));
        winInputDialog.WindowStartupLocation = WindowStartupLocation.CenterScreen;
        //winInputDialog.WindowStyle = WindowStyle.SingleBorderWindow;
        winInputDialog.ResizeMode = ResizeMode.CanResizeWithGrip;
        winInputDialog.Name = "InputBoxDialog";

I have set the width and height property of canvas equal to window. But why my screen look like this:

screen

Why is there space between controls and window borders even though they are in viewbox. I even tried Cliptobounds but still the same.

If i set Viewbox height and width it does not stretch and behave unlike a Viewbox.

i want to set this screen dynamically. How?

Sample Project is at http://122.160.24.172/download/customer_data/InputBox_New.rar.

Dror · Accepted Answer · 2016-10-25T14:46:47.460

If you want your window to have a dynamic layout, why won't you use a dynamic container unlike Canvas which is static?

You could use a Grid like this -

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.8*"/>
        <ColumnDefinition Width ="0.2*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <TextBlock Text="Hello"/>
    <Button Grid.Column="1" Content="Ok"/>
    <Button Grid.Row="1" Grid.Column="1" Content="Cancel"/>
    <TextBox Grid.Row="2" Grid.ColumnSpan="2" Text="Hello"/>
</Grid>

This way your window will layout itself when its size is changed. You can still adjust the button size and margin if you'd like.

Don't use a Canvas unless you really need support for exact pixel coordination positioning layout.

Also: Why are you layouting your window programatically and not in XAML?

Actually its a Input Box and its used very often in my app for taking user-input. If its an XAML window i have to create its instance everytime to use it. This would make my code messy. Infact I uses this dynamic window's Static function and it calls the initialize components itself. — Nikhil Agrawal, Oct 26 '11 at 07:31

Dynamic Viewbox not Stretching

1 Answers1