1

私はベテランの C および Java プログラマーですが、WPF はまったくの初心者です。

ユーザーがクリックして製品の詳細を表示し、おそらく注文する製品の画像のリストを表示するキオスクアプリケーションを作成しています。

構造とテストの利点に慣れているため、MVVM Foundation を使用してアプリを構造化しようとしています。

画面を左から右、上から下に塗りつぶすクリック可能な画像のグリッドを作成する最も自然な方法は何だろうか（またはその逆、正確な要件はありません）。

すべての画像は、現在のものになり、次の画面に表示されるオブジェクトにバインドする必要があります。ご協力いただきありがとうございます。

4

3 に答える 3

4

わかった！聞いて！これがあなたのやり方です！:) 1）ItemsControlをUniformGridと一緒に使用して、自動アライメントを取得します

<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）ビューモデルからのデータをItemsControlに入力します

<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！

于 2010-04-28T06:59:42.127 に答える
3

コードを少し改良しました。ここに名前空間宣言があります

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;
    }
于 2010-05-05T10:52:02.440 に答える
1

ViewModelObservableList<ClickableImage> m_Imagesで、パブリック プロパティとして追加します。XAML ではListView、表示に使用しClickableImageます。ClickableImageクリック時に画像と隆起したコマンドを使用してデータテンプレートを作成します。

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;
}
于 2010-04-27T08:27:14.343 に答える