WPF XAMl Auto resize the controls height and width

Hi,

Auto resize the controls height and width in XAML controls on the runtime, system or screen width changed then use flowing code.

With Auto. It means take up as much space as neccessary.

<Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

 </Grid.RowDefinitions>

The star character allows you to specify columns and rows in percentages - 

<ColumnDefinition Width="3*"/>

<ColumnDefinition Width="7*"/>

The 1st column is 30% and the second column is 70%. 

With the star you can also do - 

<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="*"/>

This means 1st column is 10 times the size of column 2. 

<RowDefinition Height="*"/>-- Taken All space available 

But TextBox inside the Collection type control, always facing problem to resize the Auto width or height, so resolved this problem with Interactivity and custom class

Add page header tag-  xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"

     <ListView x:Name="ChildGridView" ItemsSource="{Binding MyData, Mode=TwoWay}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">

                          

 <ListView.ItemTemplate>

    <DataTemplate>

        <Grid>

           <TextBox Text="{Binding DataName}" Foreground="White" Background="Red">

                 <Interactivity:Interaction.Behaviors>

                     <helpers:WindowDimensionBehavior WidthPercentage="0.3" HeightMultiple="1" HeightPercentage="1" WidthPercentage="1"/>

                      </Interactivity:Interaction.Behaviors>

             </TextBox>

          </Grid>

                                   

       </DataTemplate>

    </ListView.ItemTemplate>

  <!-- change the orirntaion of the listview items-->                          

<ListView.ItemsPanel>

         <ItemsPanelTemplate>

              <StackPanel Orientation="Horizontal"></StackPanel>                                   

          </ItemsPanelTemplate>

  </ListView.ItemsPanel>

 </ListView>

Now create Class WindowDimensionBehavior.cs in Helper Folder

Add page header tag --   xmlns:helpers="using:SyngetaPOC.Helper"

using Microsoft.Xaml.Interactivity;

using Windows.UI.Xaml;

namespace YourProjectNameSpace.Helper

{

    [Microsoft.Xaml.Interactivity.TypeConstraint(typeof(FrameworkElement))]

    class WindowDimensionBehavior : DependencyObject, IBehavior

    {

        public WindowDimensionBehavior() { this.WidthMultiple = 1; this.HeightMultiple = 1; this.HeightPercentage = double.NaN; this.WidthPercentage = double.NaN; }

        public DependencyObject AssociatedObject { get; set; }

        public FrameworkElement TypedObject { get; set; }

        public int WidthMultiple { get; set; }

        public double WidthPercentage { get; set; }

        public int HeightMultiple { get; set; }

        public double HeightPercentage { get; set; }

        public void Attach(DependencyObject associatedObject)

        { this.AssociatedObject = this.TypedObject = associatedObject as FrameworkElement; this.TypedObject.Loaded += TypedObject_Loaded; Window.Current.SizeChanged += Current_SizeChanged; }

        void TypedObject_Loaded(object sender, RoutedEventArgs e) { Handle(); }

        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) { Handle(); }

        private void Handle()

        {

            var frameWorkElement = (this.TypedObject as FrameworkElement);

            //I base all the percentage calculations on shortest dimension, you can modify this depending on your layouts requirements.

            //double shortestDimension = (Window.Current.Bounds.Width <= Window.Current.Bounds.Height) ? Window.Current.Bounds.Width : Window.Current.Bounds.Height;

            if (frameWorkElement != null)

            {

                if (this.WidthPercentage!=double.NaN) frameWorkElement.Width = Window.Current.Bounds.Width * this.WidthPercentage * this.WidthMultiple;

                if (this.HeightPercentage!=double.NaN) frameWorkElement.Height = shortestDimension * this.HeightPercentage * this.HeightMultiple;

            }

     

            //double shortestDimension = (Window.Current.Bounds.Width <= Window.Current.Bounds.Height) ? Window.Current.Bounds.Width : Window.Current.Bounds.Height;

            //if (frameWorkElement != null)

            //{

            //    if (this.WidthPercentage != double.NaN)

            //        frameWorkElement.Width = shortestDimension * this.WidthPercentage * this.WidthMultiple;

            //    if (this.HeightPercentage != double.NaN)

            //        frameWorkElement.Height = shortestDimension * this.HeightPercentage * this.HeightMultiple; }

        }

        public void Detach()

        {

            Window.Current.SizeChanged -= Current_SizeChanged; (this.AssociatedObject as Windows.UI.Xaml.Controls.Control).Loaded -= TypedObject_Loaded;

        }

    }

}

You can also customize the code as per according and modify the blow lines

<Interactivity:Interaction.Behaviors>

 <helpers:WindowDimensionBehavior WidthPercentage="0.3" HeightMultiple="1" HeightPercentage="1" WidthPercentage="1"/>

  </Interactivity:Interaction.Behaviors>

this is all scenario to change height and width on the run-time size change of the controls.

Thanks.