Ive got an issue with the overall formatting for my GridView.
I am trying to get it to format in nice squares. im not sure of their exact width / height as yet.
The issue im having is my current XAML and C# code produces the following result:
Please excuse the terrible formatting for the text, i appreciate its not the best looks wise.
What im trying to get is for the information to come up as follows. Ive had to hand draw this because I literally cant put it into code, I also need these square to not overlap with the navigation view menu button which they keep doing currently. I was looking at adding a margin to prevent the overlap, although im not sure if this is best practive or not? Heres the desired result:
Currently I believe I only have the code setup to display one of these "Squares". Each square will have its own seperate information from the others. The info here is purely for testing purposes.
I have build UserData.cs file within a folder named "Data" that holds the information for the users. That code is:
using System.Collections.ObjectModel;
namespace BudgetSheet.Data
{
class UserDataCollection: ObservableCollection<UserData>
{
public UserDataCollection()
{
// Placeholder, needs to be replaced with CSV or Database information
this.Add(new UserData()
{
Name = "Selected Username"
});
// Placeholder for user selected PayDate
this.Add(new UserData()
{
PayDate = "Friday"
});
// Placeholder for user selected PayDate
this.Add(new UserData()
{
NumberOfItems = "ItemAmount Placeholder"
});
}
}
public class UserData
{
public string Name { get; set; }
public string PayDate { get; set; }
public string NumberOfItems { get; set; }
}
}
This code is there referenced within its own GridView within MainPage.Xaml
The GridView code is as follows:
<Frame x:Name="ContentFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
<GridView ItemsSource="{StaticResource userDataCollection}"
IsItemClickEnabled="True"
SelectionMode="Single">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- This is the column definitions, every column needs defining -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<!-- This Is the contents of the Grid -->
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Frame>
Now, i appreciate that this may not give all of the formatting necessary in order for help on this, so here is the full Mainpage.Xaml Code if necessary. I apologise this is a bit hefty:
<Page x:Class="BudgetSheet.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:BudgetSheet"
xmlns:mux="using:Windows.UI.Xaml.Controls"
xmlns:muxcontrols="using:Microsoft.UI.Xaml.Controls"
xmlns:data="using:BudgetSheet.Data"
RequestedTheme="Dark">
<Page.Resources>
<data:UserDataCollection x:Key="userDataCollection"/>
</Page.Resources>
<Frame Background="{StaticResource CustomAcrylicDarkBackground}">
<mux:NavigationView IsSettingsVisible="False"
PaneTitle=" Budget Sheet Menu "
x:Name="NavView"
IsBackButtonVisible="Collapsed"
PaneDisplayMode="LeftMinimal"
AlwaysShowHeader="True"
SelectionChanged="NavView_SelectionChanged">
<mux:NavigationView.MenuItems>
<StackPanel Orientation="Horizontal" UseLayoutRounding="False">
<AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync"/>
<AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_ClickAsync"/>
<AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync"/>
<AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click"/>
<AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync"/>
</StackPanel>
<mux:NavigationViewItemSeparator/>
<mux:NavigationViewItem Name="HomeItem"
Content="HOME"
Tag="HOME_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<NavigationViewItemSeparator/>
<mux:NavigationViewItem Name="OverviewItem"
Content="ACCOUNT OVERVIEW"
Tag="OverView_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="BillsItem"
Content="BILLS"
Tag="Bills_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="PeopleItem"
Content="BILL PAYERS"
Tag="BillPayer_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="TransfersItem"
Content="BANK TRANSFERS"
Tag="Transfers_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="PayDatesItem"
Content="PAY DATES"
Tag="PayDates_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
</mux:NavigationView.MenuItems>
<Frame x:Name="ContentFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
<GridView ItemsSource="{StaticResource userDataCollection}"
IsItemClickEnabled="True"
SelectionMode="Single">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- This is the column definitions, every column needs defining -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<!-- This Is the contents of the Grid -->
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Frame>
<NavigationView.PaneFooter>
<Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<SymbolIcon Symbol="Contact" Margin="8"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Text="Change User"/>
</StackPanel>
</Button>
</NavigationView.PaneFooter>
</mux:NavigationView>
</Frame>
</Page>
I appreciate all your time and patience with this. If anything on this needs clarifying please let me know. I am running an insider vuild target version of 17723 which may help with a couple of features
you just need to reformat your DataTemplate in the following way :-
<DataTemplate>
<Grid Width="240" Height="240" Background="Gray" Margin="30,0,0,0" VerticalAlignment="Center">
<!--you need rows instead of columns because as you show in the picture you need your textblocks Stacked over each other. -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- This Is the contents of the Grid -->
<!-- you can style the textblock properties for example fontsizes to set the desired look for each one of them -->
<TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
<TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
<TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>
<!-- Any other content u want to put will come here and it should be marked with Grid.Row="3" so that it can come into last (4th) row at the very bottom. -->
</Grid>
</DataTemplate>
also in order to remove the stepping behaviour please remove following code.
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Try using ItemsControl instead of GridView. Like,
<ItemsControl ItemsSource="{StaticResource userDataCollection}">
<!-- Changing Orientation of VirtualizingStackPanel -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- To scroll horizontally -->
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<!-- Template for each card-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Related
I'd like to put a grid into the first item of my listbox, i dont just need a setter to change property but an entire grid (need add a headband with button and text).
I've serached a while...
I tried to put two listbox and "combine it" but it is not clean and it's make the ui bad.
<ListBox Style="{DynamicResource MaterialDesignListBox}"
x:Name="first" Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.Row="1" BorderThickness="0" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding FirstLesson}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
<ListBox Style="{DynamicResource MaterialDesignListBox}"
Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0"
x:Name="LessonList" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding lessonss}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
I tried to make a grid inside the grid and make it visible only on first item but the grid is not detected because the grid is to "deep".
I've found this post : How to have first item bolded in ListBox?
But i dont think it is usefull because grid isn't a property.
I don't know what to try now.
Thanks !
Here is my problem. I've built the following ListView
<ListView Grid.Row="1" x:Name="messageList" BorderThickness="0"
ItemsSource="{Binding MySource}"
HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<WrapPanel Grid.Row="0" Grid.Column="0">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.MsgText}"
Grid.Row="1" Grid.Column="0"
TextWrapping="WrapWithOverflow">
</TextBlock>
<WrapPanel Grid.Row="0" Grid.Column="1">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.MsgText}"
Grid.Row="1" Grid.Column="1"
TextWrapping="WrapWithOverflow">
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For each element of MySource only 1 between Received and Sent will be not null. The ListViewis working as i expect, placing the element on the left or the right of the screen, but the TextBlock that contain the MsgText get all the available space (so the whole row) if the message is too long. How can i limit it to stay only in one half of the parent Grid and make the text overflow eventually?
EDIT: I added an image showing my problem. The 4th message should overflow, but it doesn't
It took me few minutes to produce mcve, but the missing part of the puzzle is this:
<Grid MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
That would limit maximum width of all Grids (each item has one) and let wrapping happens. Otherwise Grid is asking for a width to fit whole item in one line and ListView is ok with it, but then you will see horizontal scrollbar (the most hated control by users including me).
MCVE:
public partial class MainWindow : Window
{
public class Item
{
public string Received { get; set; }
public string Sent { get; set; }
}
public List<Item> Items { get; }
public MainWindow()
{
InitializeComponent();
Items = new List<Item>
{
new Item { Received = "1111 111 11 111 11 1" },
new Item { Received = "2222 2 22 2 2 222222222 2 222222 22222222 222222222222 2" },
new Item { Sent = "333333333 3333333 333 33333 3 3 33 333333333 3333" },
new Item { Received = "444444444444444 444 44444444444444 44 4 44444444444444444 4 4 4444444444 4 444 444444444444" },
};
DataContext = this;
}
}
Screenshot:
Xaml:
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Received}"
TextWrapping="WrapWithOverflow" />
<TextBlock Grid.Column="1"
Text="{Binding Sent}"
TextWrapping="WrapWithOverflow" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
The problem is that your grid (and the width of the column) is calculated for each element of your list, so it takes the most space possible. I propose a backup solution, I did not find better but the result is there.
This is to place 2 ListView in 2 columns of a grid and then have the Received element in one and the Sent in the other.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" x:Name="messageListReceived" BorderThickness="0"
ItemsSource="{Binding MySource}"
HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.MsgText}"
Grid.Row="1"
TextWrapping="WrapWithOverflow">
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Grid.Column="1" x:Name="messageListSent" BorderThickness="0"
ItemsSource="{Binding MySource}"
HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.MsgText}"
Grid.Row="1"
TextWrapping="WrapWithOverflow">
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I've been trying to create control dynamically and so far it is working. But my problem is the layout
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120*"/>
<RowDefinition Height="120*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
With the xaml above. this is the screenshot of the layout
and if i use a xaml like this
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Width="100" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
But my goal is i want the textbox to expand if the program is maximized.
How can i adjust the xaml code in order to expand the textbox? Thank you
Directly use Grid instead of StackPanel also remove Width="100".
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
I am trying to produce a layout that will show me a grid of images which would respond to user clicks. The expected layout would be one of
Image 1 Image 2 Image 3
Image 4 Image 5 Image 6
Image 7 Image 8 Image 9
My current XAML layout is
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,10,10">
<ListBox x:Name="PreviewListBox"
HorizontalAlignment="Left"
Margin="2,10,0,10"
Width="446">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Path=firstImgUrl}"
HorizontalAlignment="Center"
/>
<TextBlock Text="{Binding Path=firstImgTitle}"
HorizontalAlignment="Center"
/>
<Image Source="{Binding Path=secondImgUrl}"
HorizontalAlignment="Center"
/>
<TextBlock Text="{Binding Path=secondImgTitle}"
HorizontalAlignment="Center"
/>
<Image Source="{Binding Path=thirdImgUrl}"
HorizontalAlignment="Center"
/>
<TextBlock Text="{Binding Path=thirdImgTitle}"
HorizontalAlignment="Center"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
At present it seems that the only items that are being shown are the lastly inserted items to the List item source.
I am not exactly sure why you are trying to show 3 images at one time in a grid but if you dont add rows for each item they are just going to display on top of each other.
First you have to define three(3) rows and three(3) column in your grid. Then for each image your specify the column and row it should be in.
like this
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,10,10">
<ListBox x:Name="PreviewListBox"
HorizontalAlignment="Left"
Margin="2,10,0,10"
Width="446">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image Source="{Binding Path=firstImgUrl}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding Path=firstImgTitle}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="1"
/>
<Image Source="{Binding Path=secondImgUrl}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="2"
/>
<TextBlock Text="{Binding Path=secondImgTitle}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="2"
/>
<Image Source="{Binding Path=thirdImgUrl}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="3"
/>
<TextBlock Text="{Binding Path=thirdImgTitle}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="3"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I'd like to add a border around elements in my WPF UniformGrid. What I've tried:
<Window.Resources>
<DataTemplate x:Key="GridCell">
<Border BorderBrush="DarkGray" BorderThickness="5"></Border>
</DataTemplate>
</Window.Resources>
...and...
<UniformGrid Name="grid">
<ItemsControl ItemTemplate="{StaticResource GridCell}"></ItemsControl>
</UniformGrid>
It doesn't work (no border appears). I'd like to have each child of the UniformGrid (buttons which are created programmatically, so they don't appear here) to have a border. It needs to look like, well, a grid... with horizontal and vertical gridlines delineating rows and columns.
<Grid>
<ItemsControl ItemsSource="{Binding NumericalPatches}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="7" Columns="7"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DimGray" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="5" Text="{Binding StringFormat=F4,Path=Red}" FontSize="14" Foreground="Red"/>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding StringFormat=F4,Path=Green}" FontSize="14" Foreground="Green"/>
<TextBlock Grid.Row="1" Grid.Column="0" Margin="5" Text="{Binding StringFormat=F4,Path=Blue}" FontSize="14" Foreground="Blue"/>
<TextBlock Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding StringFormat=F4,Path=Chroma}" FontSize="14" Foreground="White"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>