how to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8

Question

I have a Images page images are loading from my random urls into my ListBox, I have ApplicationBar in this page and i have created two buttons one for library page show in grid format and Second for library page in list format, by default my Library View in Grid format now i want to show its view in the list format by clicking a button from the application bar.

I have tried the converters to convert the orientation of my ListBox's stackPanel but not worked. I have tried the change the orientation by fetching the x:Name property of the ListBox but not worked.

i searched on google by putting following query but not found proper solution. "How to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8"

I am showing my ListBoxPage.xaml.

 <ListBox Name="listCloudBooks" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <tools:WrapPanel Orientation="Horizontal">
                </tools:WrapPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <Image x:Name="imgBookImage" Source="{Binding CLover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
                                       Width="80" Height="100"/>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Visibility="{Binding IsVisible}" Text="{Binding prgo}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding FName}" FontFamily="Segoe UI" FontSize="13.5" 
                                       Foreground="White" TextTrimming="WordEllipsis"
                                       VerticalAlignment="Top" HorizontalAlignment="Left" 
                                       TextWrapping="Wrap" 
                                       Width="300" Padding="2"/>
                            <TextBlock Text="{Binding LName}" FontSize="13.5" FontFamily="Segoe UI" 
                                       Foreground="White"
                                       VerticalAlignment="Top" HorizontalAlignment="Left" 
                                       TextWrapping="Wrap" 
                                       Width="300" Padding="2"/>
                            <ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center"  Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}"  CharacterSpacing="2"/>
                            <Button Content="Hello" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton,
                                       Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5" 
                                       FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top" 
                                       Foreground="White">
                            </Button>

                            <Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
                            <Button x:Name="btnDeleteBook" Click="btnDeleteBook_Click"
                                        Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0" 
                                        Height="55" Width="55"
                                <Button.Background>
                                    <ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
                                </Button.Background>
                            </Button>
                        </StackPanel>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

If you have any idea how can we do that than please let me know.

this work is silverlight StackPanel1.Orientation = Orientation.Horizontal; — MatDev8
For which control you need to change the orientation because there are 4 different that can change their orientation? — Toni Petrina
MatDev8 I am unable to fetch the x:Name property in my code behind so i can not directly assign any value to to the Orientation Property of the particular stackpanel. — Ashish-BeJovial
@Toni Petrina you are right at your point. I want change the orientation of the Main Stackpanel. — Ashish-BeJovial
You said that you've tried using converters but it didn't work, why? It sounds like a reasonable solution. — Toni Petrina

Ashish-BeJovial Ashish-BeJovial · Accepted Answer · 2014-01-17T10:35:07

I have found the alternate solution of it, what i am doing i have created two ListBox with different Name Property and made the visibility="Collapsed" and Orientation="Horizontal". And in second ListBox i created with different Name and Visibility Property="Visible" and assigned the orientation="Vertical".

So on btnList i am playing with Visibility only.

how to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8

1 Answers