如何在Windows Phone 8中的Appbar按钮上切换ListBox DataTemplate或ItemTemplate在Vertical和Horizo​​ntal之间的方向 [英] how to Switch ListBox DataTemplate or ItemTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8

问题描述

我有一个图像页面，从我的随机网址加载到我的ListBox中，我在此页面中有ApplicationBar，我创建了两个按钮，一个用于网格格式的图书馆页面显示第二个是列表格式的库页面，默认情况下我的库视图在
网格格式现在我想通过单击应用程序栏中的按钮以列表格式显示其视图。

I have a Images page which 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.

我试过转换器来转换我的ListBox的stackPanel的方向但没有工作。我已尝试通过获取ListBox的x：Name属性来更改方向但不起作用。

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在google上通过查询但未找到正确的搜索解。 "如何在按钮上切换ListBox DataTemplate方向在按钮上从Windows Phone 8中的Appbar"

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"

我正在显示我的ListBoxPage.xaml。

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>

Ashish Jain

Ashish Jain

推荐答案

您好Ashish，

Hi Ashish,

您可以通过三种方式实现这两个视图：

1.您可以在viewModel中创建一个属性以进行定位，并将其绑定在xaml中。在appbar上点击将其更改为水平或垂直。

you can implement these two view by three way:
1. you can create a property in your viewModel for orientation and bind it in xaml. On appbar click change it to either horizontal or vertical.

<tools:WrapPanel Orientation="{Binding MyOrientation}">
                </tools:WrapPanel>

2。您可以创建两个模板并使用DataTemplateSelector根据按钮单击选择正确的模板。

2. you can create two template and use DataTemplateSelector for selecting correct template based on button click.

3。你可以采取两个控件，一个是listView，另一个是gridView。根据按钮单击设置两个控件的可见性。

3. you can take two control, one is listView and other is gridView. Based on button click set the visibility of the two control.

谢谢

这篇关于如何在Windows Phone 8中的Appbar按钮上切换ListBox DataTemplate或ItemTemplate在Vertical和Horizo​​ntal之间的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！