Xaml 在运行时访问和修改UWP C++/CX应用程序中按钮的子项

我对UWP Xaml C++/CX开发非常陌生，因此如果我使用了错误的术语，我向您道歉

我正在尝试制作一个图像/照片缩略图选择托盘。用户需要选择要浏览的文件夹，内容显示在可滚动缩略图托盘中，文件名显示在下面

页面是用xaml构建的，我使用的是C++/CX。缩略图托盘是使用以下xaml构建的

<ScrollViewer Grid.Row="1" Margin="20,20,20,20" ScrollViewer.VerticalScrollBarVisibility="Hidden">
        <Grid x:Name="thumb_grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>

            </Grid.RowDefinitions>
        </Grid>
</ScrollViewer>

然后我用一个新按钮填充每个网格元素，使用

AddImageButton(int row, int col) {
   Button^ b = ref new Button();

   auto style = R->Lookup("ButtonStyle1");
   b->Style = safe_cast<Windows::UI::Xaml::Style^>(style);

   thumb_grid->Children->Append(b);
   thumb_grid->SetRow(b, row);
   thumb_grid->SetColumn(b, col);
}

但我无法使用自定义按钮image demo.jpg的名称直接访问该文本

thumb_filename->Text = "test.jpg";

因为textblock thumb_文件名仅在运行时存在。在AddImageButton中，我需要以某种方式设置内容，但不知道如何访问按钮中的子对象。在我看来，我想做一些像

Button^ b = ref new Button();
auto style = R->Lookup("ButtonStyle1");
b->Style = safe_cast<Windows::UI::Xaml::Style^>(style);

//NOT ACTUAL CODE - THIS IS WHAT I'M TRYIN TO ACHIEVE
b->Image->Source = img;        //obviously wont work because it has no knowledge whether ButtonStyle1 contains an image
b->TextBlock->Text = filename; //obviously wont work because it has no knowledge whether ButtonStyle1 contains a textblock

---

因此，我最终使用了GridView建议的方法，并将其与数据绑定一起使用

首先，我创建了一个button类注意：我仍在细化过程中，因此可能会有一些多余的片段

namespace Models {

    [Windows::UI::Xaml::Data::Bindable]
    public ref class FileBrowser sealed
    {

    private:
        Platform::String^ _fname;
        Platform::String^ _path;
        ImageSource^ _thumbImage;
        BitmapImage^ _imagedata;

    public:
        FileBrowser();

        property Platform::String^ Filename
        {
            Platform::String^ get()
            {
                return _fname;
            }
            void set(Platform::String^ value)
            {
                _fname = value;
            }
        }

        property Platform::String^ Filepath
        {
            Platform::String^ get()
            {
                return _path;
            }
            void set(Platform::String^ value)
            {
                _path = value;
            }
        }

        property ImageSource^ ThumbImage
        {
            ImageSource^ get()
            {
                return _thumbImage;
            }
            void set(ImageSource^ value)
            {
                _thumbImage = value;
            }
        }

        property BitmapImage^ ImageData
        {
            BitmapImage^ get()
            {
                return _imagedata;
            }
            void set(BitmapImage^ value)
            {
                _imagedata = value;
            }
        }

    };
}

将include FileBrowser.h添加到MainPage.xaml.h。在包含图像浏览器/列表的my View.xaml页面中，将xmlns:local=using:Models添加到标记中

我的GridView是按以下方式创建的

<GridView x:Name="thumb_grid" Grid.Row="1" Margin="20,20,20,20" IsItemClickEnabled="True" SelectionMode="Single" ItemClick="thumb_grid_ItemClick">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid MaxHeight="200" MinHeight="200" MinWidth="200" MaxWidth="200">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0"  Source="{Binding ImageData}"/>
                        <TextBlock Text="{Binding Filename}" Grid.Row="1" FontSize="20" Foreground="Gray" VerticalAlignment="Center" HorizontalAlignment="Center"/>

                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.Items>

            </GridView.Items>
        </GridView>

这将产生所需的图像托盘，其中显示文件夹的内容。每个图像都可单击/可触摸，并调用相同的函数，在这种情况下，GridView中的每个项目在按下时都会调用thumb\u grid\u ItemClick

可使用以下方法从按钮获取数据

void View::thumb_grid_ItemClick(Platform::Object^ sender, Windows::UI::Xaml::Controls::ItemClickEventArgs^ e)
{
    auto btn = (Models::FileBrowser^)e->ClickedItem;
}

---

我建议您可以将自定义按钮替换为。您可以通过修改ViewModel动态更改GridView的内容。谢谢，我将研究使用GridView。你有使用它们的好的参考例子吗？当然，你可以参考这个。请检查。谢谢，我已经下载了所有这些，并一直在使用它们来学习这一点。唯一的问题是缺少基于C++的例子。

Button^ b = ref new Button();
auto style = R->Lookup("ButtonStyle1");
b->Style = safe_cast<Windows::UI::Xaml::Style^>(style);

//NOT ACTUAL CODE - THIS IS WHAT I'M TRYIN TO ACHIEVE
b->Image->Source = img;        //obviously wont work because it has no knowledge whether ButtonStyle1 contains an image
b->TextBlock->Text = filename; //obviously wont work because it has no knowledge whether ButtonStyle1 contains a textblock

namespace Models {

    [Windows::UI::Xaml::Data::Bindable]
    public ref class FileBrowser sealed
    {

    private:
        Platform::String^ _fname;
        Platform::String^ _path;
        ImageSource^ _thumbImage;
        BitmapImage^ _imagedata;

    public:
        FileBrowser();

        property Platform::String^ Filename
        {
            Platform::String^ get()
            {
                return _fname;
            }
            void set(Platform::String^ value)
            {
                _fname = value;
            }
        }

        property Platform::String^ Filepath
        {
            Platform::String^ get()
            {
                return _path;
            }
            void set(Platform::String^ value)
            {
                _path = value;
            }
        }

        property ImageSource^ ThumbImage
        {
            ImageSource^ get()
            {
                return _thumbImage;
            }
            void set(ImageSource^ value)
            {
                _thumbImage = value;
            }
        }

        property BitmapImage^ ImageData
        {
            BitmapImage^ get()
            {
                return _imagedata;
            }
            void set(BitmapImage^ value)
            {
                _imagedata = value;
            }
        }

    };
}

<GridView x:Name="thumb_grid" Grid.Row="1" Margin="20,20,20,20" IsItemClickEnabled="True" SelectionMode="Single" ItemClick="thumb_grid_ItemClick">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid MaxHeight="200" MinHeight="200" MinWidth="200" MaxWidth="200">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0"  Source="{Binding ImageData}"/>
                        <TextBlock Text="{Binding Filename}" Grid.Row="1" FontSize="20" Foreground="Gray" VerticalAlignment="Center" HorizontalAlignment="Center"/>

                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.Items>

            </GridView.Items>
        </GridView>

auto btn = ref new Models::FileBrowser();
btn->Filename = f->GetAt(i)->DisplayName + f->GetAt(i)->FileType;
btn->Filepath = f->GetAt(i)->Path;
btn->ImageData = I;
thumb_grid->Items->Append(btn);

void View::thumb_grid_ItemClick(Platform::Object^ sender, Windows::UI::Xaml::Controls::ItemClickEventArgs^ e)
{
    auto btn = (Models::FileBrowser^)e->ClickedItem;
}