です... "、ポップアップウィンドウで" User Control "を選択し、名前を付けて作成を確認します。
今、あなたはこのようなあなたのユーザーコントロールを変更することができます。背後
<UserControl
x:Class="DropDownMenuForeachRowInGridView.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DropDownMenuForeachRowInGridView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="StackPanel_Tapped" Grid.Row="0">
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding RoomNo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding host}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="130" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding Status}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" />
<Ellipse Width="15" Height="15" Fill="{Binding ellipseColor}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding Date}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="170" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding TimeFrom}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding TimeTo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
</StackPanel>
<StackPanel x:Name="dropDown" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="1" Visibility="Collapsed" BorderBrush="White" BorderThickness="2" CornerRadius="5">
<TextBlock Text="Host:" FontSize="25" Padding="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" />
<Button Content="Book now" Click="Button_Click" Margin="30,0,0,0" />
</StackPanel>
</Grid>
</UserControl>
コード：
public sealed partial class MyUserControl : UserControl
{
public ObservableCollection<RoomInfo> roominfo;
public MyUserControl()
{
this.InitializeComponent();
roominfo = new ObservableCollection<RoomInfo>();
roominfo.Clear();
roominfo.Add(new RoomInfo { RoomNo = "2NR12", host = "Available", Status = "Available", ellipseColor = "#FF008000", Date = "June 18,2016", TimeFrom = "02:00", TimeTo = "03:00" });
roominfo.Add(new RoomInfo { RoomNo = "2NR12", host = "Ayman", Status = "Meeting", ellipseColor = "#FFFF0000", Date = "June 19,2016", TimeFrom = "11:00", TimeTo = "All Day" });
}
private void StackPanel_Tapped(object sender, TappedRoutedEventArgs e)
{
dropDown.Visibility = Visibility.Visible;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
dropDown.Visibility = Visibility.Collapsed;
}
}
さて、問題は、我々はこれをやってGridViewさんDataTemplate .Beforeでそれを使用する方法でありますこのユーザーコントロールを拡張することができるので、このコントロールの高さを動的に変更することができます。 GridViewコントロールはItemsPanelとしてItemsWrapGridを使用します。これにより、他のアイテムのサイズはすべて最初のアイテムのサイズと同じになります。
基本的に、最初のアイテムが展開されている場合、他のアイテムは最初のアイテムの高さに変更されますが、ドロップダウンメニューは展開されません。他のアイテム、拡張アイテムと元のアイテムはサイズ変更されます。だから私はちょうどListViewとGridViewの両方でこのユーザーコントロールを使用すると、それらを比較することができます。
<ListView x:Name="listView" ItemsSource="{x:Bind roominfo}" Header="ListView">
<ListView.ItemTemplate>
<DataTemplate>
<local:MyUserControl />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<GridView x:Name="gridView" ItemsSource="{x:Bind roominfo}" VerticalAlignment="Bottom" Header="GridView">
<GridView.ItemTemplate>
<DataTemplate>
<local:MyUserControl />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
背後にあるコード：ここで
private ObservableCollection<RoomInfo> roominfo;
public MainPage()
{
this.InitializeComponent();
MyUserControl control = new MyUserControl();
roominfo = control.roominfo;
}
が私のデモのレンダリング画像がある：あなたがテストを持っている私のデモを必要とする場合には
、hereを確認してください。
