选择时,更改Windows 8商店XAML ListViewItem高度的高度

时间:2014-01-20 16:03:30

标签: c# xaml windows-8 windows-store-apps winrt-xaml

我有一个XAML ListView,我使用ListViewItem的以下模板:

<DataTemplate x:Key="MyItemTemplate">
    <Grid x:Name="gridMain" Height=200 d:DesignWidth="720" 
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />                
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Text="Code" Style="{StaticResource QuestionTextBlockStyle}" TextAlignment="Center" />
        <TextBlock Text="RC" Grid.Column="1" Style="{StaticResource  QuestionTextBlockStyle}" TextAlignment="Center" />
        <TextBox x:Name="textCode" Grid.Row="1" Margin="10,5" TextAlignment="Center" Text="{Binding Code, Mode=TwoWay}" Style="{StaticResource AnswerTextBoxStyle}"/>
        <TextBox x:Name="textRCode" Grid.Row="1" Grid.Column="1" Margin="10,5" TextAlignment="Center" IsEnabled="False" Text="{Binding R_Code, Mode=TwoWay}" Style="{StaticResource AnswerTextBoxStyle}"/>
            </Grid>

因为您可以看到模板(gridMain)的高度为200.我希望当ListViewItem是选定项时它为400,而当选择不同的ListViewItem时它返回200.

有人可以帮忙吗?

这是一个Windows 8商店应用程序,因此我没有像WPF这样的触发器。

由于

2 个答案:

答案 0 :(得分:3)

因为您说ListViewItem我会假设这是ListView。但是,如果你的意思是GridView,那么你所要求的是不可能的(实际意义上)。那是因为GridView创建了一个阻止这个的剪切容器。另一方面,ListView只使用StackPanel,因此您可以执行此操作。这是怎么回事。

考虑一下这个XAML(只是vanilla XAML):

<Page.DataContext>
    <local:MyViewModel/>
</Page.DataContext>
<Grid Background="Black">
    <ListView ItemsSource="{Binding Items}" 
              SelectionMode="Single" 
              SelectionChanged="ListView_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="100" Width="100" Background="DimGray">
                    <TextBlock Text="{Binding}" FontSize="50" 
                               VerticalAlignment="Center" 
                               HorizontalAlignment="Center" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

然后是这个代码隐藏:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    Grid CurrentGrid;
    private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (CurrentGrid != null)
            CurrentGrid.Height = 100;
        if (!e.AddedItems.Any())
            return;
        var container = (sender as ListView).ContainerFromItem(e.AddedItems.First());
        var presenter = VisualTreeHelper.GetChild(container, 0);
        CurrentGrid = VisualTreeHelper.GetChild(presenter, 0) as Grid;
        CurrentGrid.Height = 150;
    }
}

public class MyViewModel
{
    ObservableCollection<string> _Items = new ObservableCollection<string>
        (Enumerable.Range(1, 20).Select(x => x.ToString()));
    public ObservableCollection<string> Items { get { return _Items; } }
}

像魅力一样。

enter image description here

祝你好运!

答案 1 :(得分:1)

您可以使用ItemTemplateSelector:

public class TemplateSelector : DataTemplateSelector
    {
        public DataTemplate DataTemplate1 { get; set; }

        public DataTemplate SelectedDataTemplate { get; set; }



        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            if (item.IsSelected)
            {
               return SelectedDataTemplate;
            }
            else
            {
               return DataTemplate1;
            }
            return base.SelectTemplateCore(item, container);
        }
    }

//在你的xaml页面

<common:DataTemplateSelector x:Key="DataTemplateSelector" 
                                    DataTemplate1="{StaticResource DataTemplate1}"
                                    SelectedDataTemplate="{StaticResourc DataTemplate2}" />


<DataTemplate x:key="DataTemplate1" />
<DataTemplate x:key="DataTemplate2" />

//在列表框中     ItemTemplateSelector =“{StaticResource DataTemplateSelector}”