locked
updating images width and height dyanmically in variablesizewrap grid in windows store app

    Question

  • Hi,

    We are able to show images in variablesizewrap grid(VSWG).

    How to set "VariableSizedWrapGrid.ColumnSpanProperty" and "VariableSizedWrapGrid.RowSpanProperty" dynamically based on values entered in textbox ?

    Values in textbox is bound to property (onProperty changed is implemented) of class "Image" and we have observable collection list of class "Image".

    VSWG is bound to this list. So for 1st time when we initialize this list, images get properly displayed in VSWG. but now if change value in textbox, which is bound to 1 property(column span), its  value does not reflect back in list and hence does not reflect column spanning in VSWG.

    All properties and list have implemented onPropertyChanged Event.


    Monday, December 22, 2014 11:01 AM

Answers

  • A quick walk around, we should re-binding the source for the ListView or GridView can fix the issue.

    Before:

    After I click the button to re-assign the column for it:

    I paste my code here for your reference.

    XAML

    <Page
        x:Class="App249.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App249"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <DataTemplate x:Key="CustomTileItem">
                <Grid >
                    <Border>
                        <Rectangle Stretch="UniformToFill" Fill="{Binding BaColor}"></Rectangle>
                    </Border>
    
                    <StackPanel VerticalAlignment="Bottom" >
                        <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"  Height="30" Margin="15,0,15,0"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="grid" >
            <local:MyGridView ItemsSource="{Binding }" ItemTemplate="{StaticResource CustomTileItem}"
                        Padding="0" Margin="100" Height="630" x:Name="mygridview">
                <local:MyGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemHeight="150" ItemWidth="75" Orientation="Vertical" MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </local:MyGridView.ItemsPanel>
            </local:MyGridView>
            <Button Content="Button" HorizontalAlignment="Left" Height="63" Margin="10,134,0,0" VerticalAlignment="Top" Width="73" Click="Button_Click"/>
        </Grid>
    </Page>
    

    CS:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace App249
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public static List<DataModel> Model;
            public MainPage()
            {
                this.InitializeComponent();
    
                Model = new List<DataModel>();
                Model.Add(new DataModel { ColunmSpan = 6, RowSpan = 2, Title = "Item1", BaColor = "Blue" });
                Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item2", BaColor = "Red" });
                Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item3", BaColor = "GreenYellow" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item4", BaColor = "Green" });
                Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 2, Title = "Item5", BaColor = "MediumOrchid" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item6", BaColor = "Brown" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item7", BaColor = "Coral" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item8", BaColor = "Blue" });
    
                mygridview.ItemsSource = Model;
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Model[3].ColunmSpan = 5;
    
                mygridview.ItemsSource = null;
                mygridview.ItemsSource = Model;
    
                //mygridview.UpdateLayout();
            }
        }
    
    
        public class MyGridView : GridView
        {
            
            public MyGridView()
            {
            }
    
            protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
            {
    
                DataModel dataItem = item as DataModel;
    
    
                if (dataItem != null)
                {
                    var gridItem = element as GridViewItem;
                    if (gridItem != null)
                    {
                        VariableSizedWrapGrid.SetRowSpan(gridItem, dataItem.RowSpan);
                        VariableSizedWrapGrid.SetColumnSpan(gridItem, dataItem.ColunmSpan);
                    }
    
                }
                base.PrepareContainerForItemOverride(element, item);
    
    
            }
        }
    
        public class DataModel
        {
    
            public int RowSpan
            {
                get;
                set;
            }
            public int ColunmSpan
            {
                get;
                set;
            }
            public string Title
            {
                get;
                set;
            }
            public string BaColor
            {
                get;
                set;
            }
    
        }
    }
    

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 7, 2015 9:39 AM
    Moderator

All replies

  • Hi Vaibhav,

    onProperty event looks like will be fired once the TextBox finish editing. I thought what you need seems like trigger the key event for instance KeyDown event.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 23, 2014 8:09 AM
    Moderator
  • Hi Jamles,

    Thanks for your reply. When I am done with editing a textbox and press tab, onproperty changed will fire. And this textbox value is one of the valriable in list object.

    So my question is Why list doesn't get updated soon being observableCollection? and why same is not reflected with variableSizeWrapGrid?

    Tuesday, December 23, 2014 10:35 AM
  • Hi Vaibhav,

    Sorry for a late response. I just create a sample and looks I cannot change the ColumnSpan Property while the app is running.

    I will further investigate it, any update will reply here, thanks for your patient.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 7, 2015 9:23 AM
    Moderator
  • A quick walk around, we should re-binding the source for the ListView or GridView can fix the issue.

    Before:

    After I click the button to re-assign the column for it:

    I paste my code here for your reference.

    XAML

    <Page
        x:Class="App249.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App249"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <DataTemplate x:Key="CustomTileItem">
                <Grid >
                    <Border>
                        <Rectangle Stretch="UniformToFill" Fill="{Binding BaColor}"></Rectangle>
                    </Border>
    
                    <StackPanel VerticalAlignment="Bottom" >
                        <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"  Height="30" Margin="15,0,15,0"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="grid" >
            <local:MyGridView ItemsSource="{Binding }" ItemTemplate="{StaticResource CustomTileItem}"
                        Padding="0" Margin="100" Height="630" x:Name="mygridview">
                <local:MyGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemHeight="150" ItemWidth="75" Orientation="Vertical" MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </local:MyGridView.ItemsPanel>
            </local:MyGridView>
            <Button Content="Button" HorizontalAlignment="Left" Height="63" Margin="10,134,0,0" VerticalAlignment="Top" Width="73" Click="Button_Click"/>
        </Grid>
    </Page>
    

    CS:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace App249
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public static List<DataModel> Model;
            public MainPage()
            {
                this.InitializeComponent();
    
                Model = new List<DataModel>();
                Model.Add(new DataModel { ColunmSpan = 6, RowSpan = 2, Title = "Item1", BaColor = "Blue" });
                Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item2", BaColor = "Red" });
                Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item3", BaColor = "GreenYellow" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item4", BaColor = "Green" });
                Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 2, Title = "Item5", BaColor = "MediumOrchid" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item6", BaColor = "Brown" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item7", BaColor = "Coral" });
                Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item8", BaColor = "Blue" });
    
                mygridview.ItemsSource = Model;
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Model[3].ColunmSpan = 5;
    
                mygridview.ItemsSource = null;
                mygridview.ItemsSource = Model;
    
                //mygridview.UpdateLayout();
            }
        }
    
    
        public class MyGridView : GridView
        {
            
            public MyGridView()
            {
            }
    
            protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
            {
    
                DataModel dataItem = item as DataModel;
    
    
                if (dataItem != null)
                {
                    var gridItem = element as GridViewItem;
                    if (gridItem != null)
                    {
                        VariableSizedWrapGrid.SetRowSpan(gridItem, dataItem.RowSpan);
                        VariableSizedWrapGrid.SetColumnSpan(gridItem, dataItem.ColunmSpan);
                    }
    
                }
                base.PrepareContainerForItemOverride(element, item);
    
    
            }
        }
    
        public class DataModel
        {
    
            public int RowSpan
            {
                get;
                set;
            }
            public int ColunmSpan
            {
                get;
                set;
            }
            public string Title
            {
                get;
                set;
            }
            public string BaColor
            {
                get;
                set;
            }
    
        }
    }
    

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 7, 2015 9:39 AM
    Moderator