如何在 ContentDialog 中使用 ListView

Question

我正在尝试通过 "HardCode" 使用 ContentDialog，而不是在 XAML 页面中，我有很多 TextBlocks 可以使用，所以我可能需要在 ContentDialog 中使用 ScrollView 或 ListView，这是我的代码！

TextBlock txt = new TextBlock();
            txt.Text = "TI Cajueiro Seco / Rua do Sol";
            txt.FontSize = 25;
            txt.Foreground = new SolidColorBrush(Colors.White);
            txt.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
            txt.VerticalAlignment = VerticalAlignment.Top;
            txt.FontFamily = new FontFamily("/Fonts/MYRIADPRO-BOLD.OTF#Myriad Pro");

TextBlock txt2 = new TextBlock();
            txt2.Text = "Rotas da Linha";
            txt2.FontSize = 25;
            txt2.Foreground = new SolidColorBrush(Colors.White);
            txt2.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
            txt2.VerticalAlignment = VerticalAlignment.Bottom;
            txt2.FontFamily = new FontFamily("/Fonts/Exo-Regular.ttf#Exo");

Grid grid = new Grid();
            grid.Children.Add(txt2);
            grid.Background = new SolidColorBrush(Colors.Red); 

StackPanel stk = new StackPanel();
            //stk.Children.Add(bar);
            stk.Children.Add(txt);
            stk.Children.Add(espaco);
            stk.Children.Add(grid);
            //stk.Children.Add(txt3);
            stk.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;

Grid contentGrid = new Grid();
            contentGrid.Height = Window.Current.Bounds.Height;
            contentGrid.Width = Window.Current.Bounds.Width;  
            contentGrid.Width -= 40;
            contentGrid.Children.Add(stk);

ContentDialog dlg = new ContentDialog();
              dlg.Content = contentGrid;
              SolidColorBrush color = new SolidColorBrush(Colors.Black);
              color.Opacity = 0.9;
              dlg.Background = color;
              dlg.ShowAsync();

Answer 1

在这种情况下，您肯定需要 ListView。最简单的情况是在 XAML 中完全定义它，但当然可以在代码中完成它。

<!-- first DataTemplate for your items -->
<Page.Resources>
    <DataTemplate x:Key="myResourceTemplate">
        <TextBlock Text="{Binding}" FontSize="25"/> <!--also rest of properties font-size etc.-->
    </DataTemplate>
</Page.Resources>

<!-- define your dialog in xaml -->
<ContentDialog x:Name="myXAMLDialog">
    <Grid>
        <ListView x:Name="myXAMLList" ItemTemplate="{StaticResource myResourceTemplate}"/>
    </Grid>
</ContentDialog>

然后在代码中：

// your list with strings somewhere
ObservableCollection<string> strings = new ObservableCollection<string>() { "First", "Second", "Third" };

private async void firstBtn_Click(object sender, RoutedEventArgs e)
{
    myXAMLList.ItemsSource = strings;
    await myXAMLDialog.ShowAsync();
}

下面的代码几乎完全相同：

private async void secondBtn_Click(object sender, RoutedEventArgs e)
{
    ContentDialog myDlg = new ContentDialog();
    Grid myGrid = new Grid();
    ListView myList = new ListView();
    myList.ItemTemplate = this.Resources["myResourceTemplate"] as DataTemplate;
    myList.ItemsSource = strings;
    myGrid.Children.Add(myList);
    myDlg.Content = myGrid;
    await myDlg.ShowAsync();
}

在上述两种情况下，您只需为 ListView 中的项目设置来源，它将基于 DataTemplate[=27= 创建项目]本身。

您可能会看一下 ListView 的工作原理 - 它几乎相同 - 带有 scrollveiwer 的堆栈面板。

Answer 2

任何来这里寻找在 Windows 10 通用项目的 ContentDialog 中放置可滚动 ListView 的方法的人，请参阅 here。基本上，需要对 ContentDialog 模板进行少许修改。您可以粘贴该答案的修改版本，然后将该模板应用到您的 ContentDialog。

Answer 3

对不起我的英语！我在 ContentDialog 中实现的 ListView 具有滚动功能。滚动列表视图项目运行。

添加 ListView 项模板

private DataTemplate Create()
{
    var stringReader = new StringReader(@"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
    <TextBlock TextWrapping=""Wrap"" HorizontalAlignment=""Stretch""
       VerticalAlignment=""Stretch"" Text=""{Binding Title}"" FontSize=""14""/>
       </DataTemplate>");

    return XamlReader.Load(stringReader.ReadToEnd()) as DataTemplate;
}

列表视图

 var myList = new ListView
    {
        ItemTemplate = Create(),
        ItemsSource =
           new ObservableCollection<Str>()
            {
                new Str() {Id =1, Title = "test"},
                new Str() {Id =2, Title = "test"},
                new Str() {Id =3, Title = "test"},
                new Str() {Id =4, Title = "test"},
                new Str() {Id =5, Title = "test"},
                new Str() {Id =6, Title = "test"},
                new Str() {Id =7, Title = "test"},
                new Str() {Id =8, Title = "test"},
                new Str() {Id =9, Title = "test"},
                new Str() {Id =10, Title = "test"},
                new Str() {Id =11, Title = "test"},
                new Str() {Id =12, Title = "test"},
                new Str() {Id =13, Title = "test"},
                new Str() {Id =14, Title = "test"},
                new Str() {Id =15, Title = "test"},
                new Str() {Id =16, Title = "test"},
                new Str() {Id =17, Title = "test"},
                new Str() {Id =18, Title = "test"},
                new Str() {Id =19, Title = "test"},
                new Str() {Id =20, Title = "test"},
                new Str() {Id =21, Title = "test5000"}
            },
        HorizontalAlignment = HorizontalAlignment.Stretch,
        VerticalAlignment = VerticalAlignment.Stretch,

    };

创建 ScrollViewer

 var bounds = Window.Current.Bounds;
 var height = bounds.Height;
 var scroll = new ScrollViewer() { HorizontalAlignment = HorizontalAlignment.Stretch, VerticalAlignment = VerticalAlignment.Stretch, Height = height - 100 };

在ContentDialog中添加ListView和ScrollViewer

 var grid = new StackPanel();
 grid.Children.Add(myList);
 scroll.Content = grid;
 var dialog = new ContentDialog { Title = "Title", Content = scroll };
 var s = dialog.ShowAsync();

通过单击项目关闭对话框的实施

    myList.SelectionChanged += delegate (object o, SelectionChangedEventArgs args)
    {
        var item = ((ListView)o).SelectedItem;
        s.Cancel();
    };

如何在 ContentDialog 中使用 ListView

How to use ListView inside of ContentDialog

c#

windows-runtime

windows-phone-8.1