Question

在我的.net4-0 C＃应用程序中，我有一个8x5按钮网格。他们每个人都应该在图像上显示一个图像和一个字母（按下热键）（左上角）。因为图像取决于我的数据，所以它必须是动态的。所有图像都具有相同的尺寸（100x100像素）。图像应该很好地填充按钮。

我怎样才能做到这一点？到目前为止我的想法是，每次加载数据并更改显示图像时，我都会手动创建一个Stackpanel，上面有Image和TextBlock。但这并不适合。

Answer 1

使用ListBox并将您的数据列表放入ListBox.ItemSource然后您可以创建自己的DataTemplate确定如何在ListBox <中显示数据/ p>

例如，您可以指定希望ListBox以8x5网格显示。这当然取决于您是否知道您将始终使用8x5单元格显示您的网格。

具体说明你想要一个带有字母的按钮，就像你说的那样我会选择这个。

<!--Resource-->
<DataTemplate DataType={x:YourViewModel}>
  <StackPanel>
    <TextBlock Content="{binding SomeText}"/>
    <Button>
      <Button.Content>
        <Image Source="{binding YourImageSource}" Width="100px" Height="100px"/>
      </Button.Content>        
    </Button>
  </StackPanel>
</DataTemplate>

这假设您在使用WPF时使用的MVVM 高度。

如果您不知道MVVM然后开始阅读它会导致它在WPF中的开发变得更好。

如果我的例子令人困惑，请提供反馈，我会更清楚。

编辑Simple-MVVM示例

假设我们想要显示带有标题和图片的游戏

首先我们创建模型

public class Game
{
    private string _title {get; set;}
    private string _imagepath {get; set;} //We are not getting the image but the imagepath

    Public string Title {get{return _title;} set{_title = value;}
    Public string Imagepath set{_imagepath = value;}
}

然后我们需要 ViewModel 。通常，ViewModel不会创建新数据，因为数据应该来自模型（可能来自数据库），但是为了这个例子，我们在ViewModel中创建它

public class GameViewModel
{
    Public ObservableCollection<Game> Games {get; set;} //<--- This is where the View is binding to
    public GameViewModel
    {
        ObservableCollection<Game> Games = new ObservableCollection<Game>(); //ObservableCollection is used to notify if we have added or removed or updated an item in the list.
        Games.Add(new Game() {Title = "Warcraft 3", Image=//Where you have your images );
        Games.Add(new Game() {Title = "Overwatch", Image=//Where you have your images );
        this.Games = Games;
    }
}

现在何时让我们的View在我们的XAML代码中绑定到这个ViewModel

<!--Basic xaml-->
<!--Resource-->
<DataTemplate DataType={x:Type local:Game}>
  <StackPanel>
    <TextBlock Content="{Binding Title}"/>
    <Button>
      <Button.Content>
        <Image Source="{Binding Imagepath}" Width="100px" Height="100px"/>
      </Button.Content>        
    </Button>
  </StackPanel>
</DataTemplate>

然后在我们的ListBox

中

<ListBox ItemSource="{Binding Games}"/>

要使其正常工作，您需要在视图中设置Datacontext。通常，当您创建新的WPF项目时，View称为 MainWindow.xaml

将ViewModel添加到datacontext中，如下所示

/*Normally you want to avoid doing anything in code-behind with MVVM 
  If you want to avoid that you have to look into DI and IoC But it is way 
  to much to do in this example*/

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new GameViewModel();
    }
}

WPF - 动态显示带有文本的图像

1 个答案: