たとえば、あなたは単純なDataGrid
<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Items}">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn CellTemplate="{StaticResource ImageCellTemplate}"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
1つのDataGridRowに複数のテンプレートを適用する場合は、テンプレート内の内部パーツの表示を変更できます。
<DataTemplate x:Key="ImageCellTemplate">
<Grid>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsImageTemplate}">
<Image Width="20" Height="20"/>
<TextBlock Text="{Binding Title}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsTextBoxTemplate}">
<TextBlock Text="{Binding Id}" Foreground="Red"/>
<TextBox Text="{Binding Title}"/>
</StackPanel>
</Grid>
</DataTemplate>
アイテムビューモデルのプロパティ(それぞれIsImageTemplateとIsTextBoxTemplate)にバインドされているImage
部分と部分があります。TextBox
それらは相互に排他的であり、パネルは互いにカバーしません。
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
var items = new List<ItemViewModel>()
{
new ItemViewModel{Id = 1, Title="First", IsImage = true},
new ItemViewModel{Id = 2, Title="Second", IsImage = false},
new ItemViewModel{Id = 3, Title="Third", IsImage = false}
};
this.DataContext = new MainViewModel { Items = items };
}
}
public class MainViewModel
{
public List<ItemViewModel> Items { get; set; }
}
public class ItemViewModel
{
public int Id { get; set; }
public string Title { get; set; }
public bool IsImage { get; set; }
public Visibility IsImageTemplate
{
get { return (IsImage == true) ? Visibility.Visible : Visibility.Collapsed; }
}
public Visibility IsTextBoxTemplate
{
get { return IsImage == false ? Visibility.Visible : Visibility.Collapsed; }
}
}