Dynamically change orientation of ListBox with style
I have defined styles for the ListBox to display items with a vertical or horizontal scroll orientation:
<Style x:Key="ListBoxVerticalStyle" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxHorizontalStyle" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
They work great when used statically in xaml eg.
<ListBox Style="{StaticResource ListBoxHorizontalStyle}" ...
I am trying to dynamically update orientation in C # with this code:
if (horizontal)
{
MyListBox.Style = Resources["ListBoxHorizontalStyle"] as Style;
}
else
{
MyListBox.Style = Resources["ListBoxVerticalStyle"] as Style;
}
MyListBox.InvalidateMeasure();
MyListBox.InvalidateArrange();
The orientation ListBox.ScrollViewer
changes, but the elements remain complex in their original orientation. As if the update is ItemsPanel
not being applied. Is there something I need to do to make the ListBox update itself completely?
source to share
I don't think it raises the PropertyChange event when you do this. At the top of my head, I only have two solutions. One of them brought out its own custom ListBox and VisualStates, which is nowhere near as long as the solution here. The other option is pretty simple, we just need to communicate that the property has changed and the easiest way I know how to do this is to simply bind it to your ViewModel.
For this I will just use the page as a ViewModel, so your XAML will be like this
<ListBox x:Name="myListBox">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="{Binding MYO}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
FROM#
using System.ComponentModel; // INotifyPropertyChanged
public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
{
// implement the INotify
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
// Constructor
public MainPage()
{
InitializeComponent();
}
private System.Windows.Controls.Orientation _myo;
public System.Windows.Controls.Orientation MYO
{
get { return _myo; }
set { _myo = value; NotifyPropertyChanged("MYO"); }
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
myListBox.DataContext = this; // have to set the datacontext to point to the page
MYO = System.Windows.Controls.Orientation.Horizontal; // set it to Horizontal
// MYO = System.Windows.Controls.Orientation.Vertical; // set it to Vertical
}
}
source to share
Check this link: http://msdn.microsoft.com/en-us/library/windows/apps/jj207002(v=vs.105).aspx
This tutorial explains how to handle screen orientation.
source to share