How to change list view DataTemplate when orientation changes

RoshaniRoshani Member ✭✭

Hi, I have Created a data template but its number of columns varies according to the device orientation. This is how I have created my data template

 var dataTemplate = new DataTemplate(() =>
            {

                var cell = new ViewCell();
                Grid cellGrid = new Grid();
                cellGrid.RowSpacing = 5;
                cellGrid.ColumnSpacing = 5;
                cellGrid.Margin = new Thickness(5, 5);
                cellGrid.RowDefinitions = new RowDefinitionCollection();
                cellGrid.ColumnDefinitions = new ColumnDefinitionCollection();

                //cellGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
                int left = 0;
                int top = 0;
                int usedColumn = 0;
                int fieldCounter = 0;
                int maxColumn;
                int columnSpan;

                if(!isPortraite)
                {
                    maxColumn = 20;
                }
                else
                {
                    maxColumn = 10;
                }
                foreach (var field in viewModel.ScreenMetadata)
                {

                    Label label = new Label();
                    Debug.WriteLine("MAX COLUMN = " + maxColumn);
                    if (fieldCounter >= viewModel.ScreenMetadata.Count())
                    {
                        fieldCounter = viewModel.ScreenMetadata.Count() - 1;
                    }
                    string relativeWidth = viewModel.ScreenMetadata.ElementAt(fieldCounter).FieldProperties["RELATIVE_WIDTH"];
                    string colorStyle = viewModel.ScreenMetadata.ElementAt(fieldCounter).FieldProperties["DISPLAY_STYLE"];
                    string key = viewModel.ScreenMetadata.ElementAt(fieldCounter).FieldProperties["COLUMN_NAME"];
                    Color fontcolor;
                    if (colorStyle == "BLACK_AND_WHITE")
                    {
                        fontcolor = Color.Black;
                    }
                    else
                    {
                        fontcolor = Color.Gold;
                    }

                    double relativeWidthDouble = Convert.ToDouble(relativeWidth);
                    if (!isPortraite)
                    {
                        relativeWidthDouble = relativeWidthDouble / 2;
                    }

                    columnSpan = (int)Math.Round(relativeWidthDouble * maxColumn, MidpointRounding.AwayFromZero);
                    usedColumn = usedColumn + columnSpan;
                    label.SetBinding(Label.TextProperty, "[" + key + "]");
                    label.TextColor = fontcolor;


                    cellGrid.Children.Add(label, left, top);
                    Grid.SetColumnSpan(label, columnSpan);
                    if (usedColumn >= maxColumn)
                    {
                        left = 0;
                        top = top + 1;
                        usedColumn = 0;
                        cellGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });


                    }
                    else
                    {
                        left = left + columnSpan;


                    }

                    fieldCounter++;
                }

                cell.View = cellGrid;


                columnSpan = 0;
                fieldCounter = 0;

                return cell;
            });
            return dataTemplate;

I have a method to detect device orientation and it successfully giving me the device orientation. I want to know how can I assign the DataTemplate when changes the orientation? Please help me. Thanks!

Answers

Sign In or Register to comment.