Buenas tardes saludos a todos.
Estoy intentando de diseñar una página en WPF C# para que se vea de la siguiente manera:
Les aclaro que no soy experto programado en WPF pero intento hacer mi trabajo.
Lo he intentado haciendo uso de un DataGrid, también he probado con un ListView y por último lo intenté con un ItemsControl, en todas las opciones logro obtener una sola columna con el listado de libros de la siguiente manera:
Pero necesito que se muestren 4 columnas como en la primera imagen con los distintos libros ordenados de izquierda a derecha, como ve allí me repite las columnas no logro hacer que no se repitan por el "ItemsSource", la idea es usar una BD con N cantidad de libros.
Al final debería devolver el item seleccionado al darle click sobre algún libro deseado.
Les anexo parte de mi código para que me entiendan un poco mejor:
Esta es mi clase:
public class Product
{
public string Image { get; set; }
public string Id { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Stock { get; set; }
}
Acá está el ObservableCollection para el ItemsSource:
public vmProduct()
{
Products = new ObservableCollection<Product>();
Products.Add(new Product { Id = "001", Image = null, Name = "Visual C#", Price = 125, Stock = 10 });
Products.Add(new Product { Id = "003", Image = null, Name = "Visual F#", Price = 115, Stock = 12 });
Products.Add(new Product { Id = "005", Image = null, Name = "Visual Basic", Price = 105, Stock = 13 });
Products.Add(new Product { Id = "002", Image = null, Name = "XAML", Price = 155, Stock = 11 });
Products.Add(new Product { Id = "004", Image = null, Name = "PHP", Price = 145, Stock = 14 });
Products.Add(new Product { Id = "006", Image = null, Name = "Node Js", Price = 135, Stock = 16 });
}
Y el código XAML:
<Grid DataContext="{StaticResource SourceProduct}">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding Products}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="5,0,0,5" Style="{StaticResource EffectGrid}">
<Grid Width="185" Height="80" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="55" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{StaticResource iconCalendarDark}" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding Name, FallbackValue=TxtProduct}"
FontSize="14" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Label Content="ID." Style="{StaticResource labels}" />
<Label Content="Stock:" Style="{StaticResource labels}" />
<Label Content="Precio:" Style="{StaticResource labels}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<Label Style="{StaticResource labels}"
Content="{Binding Id, StringFormat={}{0:c}, FallbackValue=0}"/>
<TextBlock Style="{StaticResource txtbtns}" Text="{Binding
Stock, StringFormat={}{0:#,#.00}, FallbackValue=0.00}" />
<TextBlock Style="{StaticResource txtbtns}" Text="{Binding
Price, StringFormat={}{0:c}, FallbackValue=$0.00}" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
Mi deseo es que me orienten mejor para poder lograr esto.
Espero haber explicado bien mi problema y muchas gracias por su ayuda.