Sen seçin.LI_CLOSE "Add" çözüm Explorer'da projeyi sağ tıklayarak, her öğenin İçerik olarak bir UserControl kullanabilir ve "Yeni Öğe olduğunu ... ", açılır pencerede" Kullanıcı Denetimi "ni seçin, ona bir ad verin ve bir tane oluşturmayı onaylayın.
Şimdi bu gibi kullanıcı kontrolü değiştirebilir:
<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>
kod arkasında:
Şimdi problem
GridView 'ın
DataTemplate .Daha önce biz bunu yaparken de nasıl kullanılacağını olduğunu
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;
}
}
Bu kullanıcı kontrolünün genişletilebileceğini bilmeliyiz, bu yüzden bu kontrolün yüksekliği dinamik olarak değiştirilebilir. Ve GridView denetimi, ItemsPanel olarak ItemsWrapGrid kullanır, bu diğer öğelerin boyutunun ilk öğenin boyutuyla aynı olmasını zorlar.
Temel olarak, eğer ilk öğeniz genişletilirse, diğer öğeler yüksekliği ilk öğenin yüksekliğine değiştirir, ancak açılır menüyü genişletmez ve ilk öğe genişletilmezse, genişletilirken diğer öğeler, genişletilmiş öğe ve orijinal olan yeniden boyutlandırılacaktır. Bu yüzden bu kullanıcı denetimini hem ListView hem de GridView'da kullanıyorum, bunları karşılaştırabilirsiniz. geride
<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>
kodu: durumunda
Eğer test yaptırmaya demomu ihtiyaç here kontrol edin: Burada
private ObservableCollection<RoomInfo> roominfo;
public MainPage()
{
this.InitializeComponent();
MyUserControl control = new MyUserControl();
roominfo = control.roominfo;
}
benim demo oluşturulma resimdir.
