كيف يمكنني صنع شبكة من الصور القابلة للنقر من قائمة البيانات في WPF؟

Question

أنا مبرمج C و Java محنك ، ولكن مبتدئ WPF المطلق.

أقوم بإنشاء تطبيق Kiosk الذي سيعرض قائمة من صور المنتجات التي ينقر عليها المستخدم لرؤية تفاصيل المنتج وربما تقديم طلب.

أحاول هيكلة تطبيقي مع أساس MVVM لأنني معتاد على فوائد الهيكل والاختبارات.

أتساءل ما هي الطريقة الأكثر طبيعية لإنشاء شبكة من الصور القابلة للنقر التي ستملأ الشاشة من اليسار إلى اليمين ، من أعلى إلى أسفل (أو العكس ، ليس لدي أي متطلبات دقيقة).

يجب أن تكون أي صورة مرتبطة بكائن سيصبح حاليًا وسيتم عرضه في الشاشة التالية. شكرا لمساعدتك.

Answer 1

نعم! اسمع! إليكم كيف تفعل ذلك! :) 1) استخدم عناصر Control مع UniformGrid للحصول على aligment التلقائي

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid>
            </UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <Button Width="50" Height="50"/>
    <Button Width="50" Height="50"/>
    <Button Width="50" Height="50"/>
</ItemsControl>

2) ملء العناصر المسكونة مع البيانات من ViewModel الخاص بك

<ItemsControl ItemsSource="{Binding Path=ImageList}"...

public ObservableCollection<ClickableImage> ImageList
{
    get { return m_ImageList;}
}

... constructor
{
    m_ImageList = new ObservableCollection<ClickableImage>();
    m_ImageList.Add(new ClickableImage("image.png");
}

tadaaaa!

Answer 2

لقد صقلت القليل من الرمز. هنا إعلان مساحة الاسم

xmlns:vm="clr-namespace:TestSandbox.ViewModels"

datacontext

<UserControl.DataContext>
    <vm:ViewModel1/>
</UserControl.DataContext>

و Uniformgrid

<ItemsControl Name="imageList" ItemsSource="{Binding Path=Products}" BorderBrush="#FFA90606" Background="#FFE70F0F">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Margin="50">
            </UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- The Image binding -->
            <Image Source="{Binding Path=image}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

هنا رمز C# في نموذج العرض

    public List<Product> Products {get; set; }

    public ViewModel1()
    {
        Products = new List<Product>();
        Products.Add(MakeProduct(@"..\images\beemovie.jpg"));
        Products.Add(MakeProduct(@"..\images\darkknight.jpg"));
        Products.Add(MakeProduct(@"..\images\matrix.jpg"));
        Products.Add(MakeProduct(@"..\images\milo.jpg"));
        Products.Add(MakeProduct(@"..\images\superhero.jpg"));
        Products.Add(MakeProduct(@"..\images\twilight.jpg"));
        Products.Add(MakeProduct(@"..\images\xfiles.jpg"));
    }

    public Product MakeProduct(string path)
    {
        return new Product(path, MakeImage(path));
    }

    public BitmapImage MakeImage(string path)
    {
        BitmapImage bmpi = new BitmapImage();
        bmpi.BeginInit();
        bmpi.UriSource = new Uri(path, UriKind.Relative);
        bmpi.EndInit();
        return bmpi;
    }

Answer 3

في ViewModel إضافة ObservableList<ClickableImage> m_Images كممتلكات عامة. في استخدام XAML ListView لعرض ClickableImage. إنشاء datatemplate ل ClickableImage مع Image و Arted Command UpPon Click.

على XAML:

<Button Command="{Binding Path=OnClickCommand}"/>  

على ViewModel:

public ICommand OnClickCommand {
    get
    {
        return  new RelayCommand(aram => this.Click(), param => this.CanClick);
    }
}
public void Click() {
        //i was clicked!  
        globalBigImageViewModel.BigImageContent = m_Image;
}