locked
How to set a % for width and height ? RRS feed

  • Question

  • How can I set a % for group/canvas and etc/ height and width from the main window ?
    Friday, August 5, 2011 10:53 AM

Answers

  • Hi Eternz,

    In addition to Pritesh3's suggestions, you can use the star sizing in Grid to do this.

    Here is a simple sample.

    <Window x:Class="WPFSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="300" Width="500">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="6*"/>
          <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0"/>
      </Grid>
    </Window>

    The border will be 60% width of the window.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Friday, August 12, 2011 3:16 AM
    Tuesday, August 9, 2011 9:29 AM
  • According to this link a canvas isn't the best container to be using in terms of automatic layout support. A grid is a better option of container 

     

    http://stackoverflow.com/questions/462390/how-to-stretch-in-width-a-wpf-user-control-to-its-window

     

    Basically this article gave me an idea which might work you -

     

    Say you have a window with a width of 300 -

     

    <window width="300" x:Name="Mainwin">

    <Canvas Width="{Binding elementName=Mainwin, Path=Width, Converter="{StaticResource ReduceWidthConverter}"}"

     

    The converter could take the value of 300, get 60% of 300 (180) and return that figure as the canvas width.

     

    Thats just an idea though. I think I would rather use a grid instead of a canvas. 

    • Marked as answer by Min Zhu Friday, August 12, 2011 3:16 AM
    Friday, August 5, 2011 12:05 PM

All replies

  • Hi,

     

    To do this in WPF you need to set the HorizontalAlignment and VerticalAlignment to stretch. 

     

    HorizontalAlignment="Stretch"

    Heres a link to another thread asking the same question -
    http://stackoverflow.com/questions/717299/wpf-setting-the-width-and-height-as-a-percentage-value

    • Proposed as answer by Paulo Schaper Wednesday, December 21, 2016 4:16 PM
    Friday, August 5, 2011 11:11 AM
  • Hi,

    Here you can not give % for height and width, but if you want to do, then consider following workaround.

    <Grid x:Name="a1">
          <Border Width="{Binding ElementName=a1,Path=ActualWidth,Converter={StaticResource SetPercentageConverter},ConverterParameter=60}" Background="Red"/>
    //Here 60 is your percentage
        </Grid>

     

    and in converter

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows.Data;
    
    namespace WpfApplication1
    {
      public class SetPercentageConverter : IValueConverter
      {
    
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
          string 100percentaValue = value.ToString();
          string actualPercentage = parameter.ToString(); // Here you can write your logic tocalculate width based on your percentage
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
          throw new NotImplementedException();
        }
      }
    }
    

    Thanks,

    Rajnikant

    Friday, August 5, 2011 11:20 AM
  • Hi,

     

    To do this in WPF you need to set the HorizontalAlignment and VerticalAlignment to stretch. 

     

     

    HorizontalAlignment="Stretch"

    Heres a link to another thread asking the same question -
    http://stackoverflow.com/questions/717299/wpf-setting-the-width-and-height-as-a-percentage-value

     

    But width="2*" does not work for me ...

     

    A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll

     

    Additional information: 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number '17' and line position '21'.

     

     

    I looked into the references but I could not find Sys.Win.Markup in there...

    Friday, August 5, 2011 11:54 AM
  • I dont understand your last post.

     

    The resolution on that link was to use the stretch property so the control stretches to fit the windows width and height.  

     

    According to the post the width="2*" will only work if you apply on a textbox inside a grid which maybe why you are getting this error.

     

    can you not apply HorizontalAlignment="Stretch" in your xaml?

    Friday, August 5, 2011 11:59 AM
  • According to this link a canvas isn't the best container to be using in terms of automatic layout support. A grid is a better option of container 

     

    http://stackoverflow.com/questions/462390/how-to-stretch-in-width-a-wpf-user-control-to-its-window

     

    Basically this article gave me an idea which might work you -

     

    Say you have a window with a width of 300 -

     

    <window width="300" x:Name="Mainwin">

    <Canvas Width="{Binding elementName=Mainwin, Path=Width, Converter="{StaticResource ReduceWidthConverter}"}"

     

    The converter could take the value of 300, get 60% of 300 (180) and return that figure as the canvas width.

     

    Thats just an idea though. I think I would rather use a grid instead of a canvas. 

    • Marked as answer by Min Zhu Friday, August 12, 2011 3:16 AM
    Friday, August 5, 2011 12:05 PM
  • Hi Eternz,

    In addition to Pritesh3's suggestions, you can use the star sizing in Grid to do this.

    Here is a simple sample.

    <Window x:Class="WPFSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="300" Width="500">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="6*"/>
          <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0"/>
      </Grid>
    </Window>

    The border will be 60% width of the window.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Friday, August 12, 2011 3:16 AM
    Tuesday, August 9, 2011 9:29 AM
  • Any reason of why the Stretch value is needed?
    Wednesday, December 21, 2016 4:17 PM