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>
Related
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>
I have added a ListView in GridView
<tel:RadGridView AutoGenerateColumns="False" x:Name="ModuleGrid" ItemsSource="{Binding ProjectList,Source={StaticResource TowersVM},Mode=TwoWay}"
HorizontalAlignment="Stretch" ShowGroupPanel="False" ColumnWidth="*" ShowColumnHeaders="False" RowIndicatorVisibility="Collapsed" Height="500">
<tel:StyleManager.Theme>
<tel:Windows8TouchTheme/>
</tel:StyleManager.Theme>
<tel:RadGridView.Columns>
<tel:GridViewImageColumn Width="150" x:Name="Img" IsFilterable="False" DataMemberBinding="{Binding TowerImage}"/>
<!--<tel:GridViewDataColumn Width="100" x:Name="Img" Header="" IsFilterable="False" DataMemberBinding="{Binding TowerImage}"/>-->
<tel:GridViewColumn>
<tel:GridViewColumn.CellTemplate>
<DataTemplate>
<ListView x:Name="TemplateList" ItemsSource="{Binding UnitTypesList,Source={StaticResource TowersVM},Mode=TwoWay}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="40,20,40,20">
<Grid x:Name="TemplateGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" Margin="5,0,0,0">
<TextBlock FontSize="14" Text="{Binding Tower_Name}" FontWeight="ExtraBold"/>
<TextBlock FontSize="9" Text="{Binding Location}"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="{Binding Unit_type_desc}" Margin="5,5,0,0"/>
<StackPanel Grid.Row="2" Grid.Column="0" Orientation="Horizontal" Margin="5,5,0,0">
<Image Source="/Resources/rupee_icon.png" Width="30"/>
<StackPanel Orientation="Vertical" Margin="5,0,0,0">
<TextBlock Text="Price"/>
<TextBlock Text="{Binding List_price}">
<Run Text=" Cr."/>
</TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal" Margin="20,5,0,0">
<Image Source="/Resources/area_icon.png" Width="30"/>
<StackPanel Orientation="Vertical" Margin="5,0,0,0">
<TextBlock Text="Area"/>
<TextBlock Text="{Binding Carpet_area}">
<Run Text=" Sqft."/>
</TextBlock>
</StackPanel>
</StackPanel>
<Button BorderBrush="LightGreen" Background="White" Grid.Row="3" Grid.Column="0" Margin="0,5,0,5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Available : "/>
<TextBlock Text="{Binding Available,Source={StaticResource TowersVM},Mode=TwoWay}"/>
</StackPanel>
</Button>
<Button BorderBrush="Red" Background="White" Grid.Row="3" Grid.Column="1" Margin="20,5,0,5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Sold : "/>
<TextBlock Text="{Binding Sold,Source={StaticResource TowersVM},Mode=TwoWay}"/>
</StackPanel>
</Button>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</tel:GridViewColumn.CellTemplate>
</tel:GridViewColumn>
</tel:RadGridView.Columns>
</tel:RadGridView>
What I want is :
A GridView row with one Item which will contain a ListView (with different number of Items).
The problem: All the RadGrid rows are having same number of Items in the ListView.
ViewModel code :
public async void PopulateProjects()
{
var vAllProjList = await _projectsRepo.GetAllAsync();
foreach(var proj in vAllProjList)
{
//UnitTypesList.Clear();
ProjectList.Add(new ProjectTowerUnitTypeModel() { Projectid = proj.Id, ProjectName = proj.Name });
var vProjSpecificUnitList = await _unitTypesRepo.FindAsync(q => q.Class_id == proj.Id);
foreach(var unit in vProjSpecificUnitList)
{
UnitTypesList.Add(new ProjectTowerUnitTypeModel() { });
}
}
}
I achieved it by taking ItemsSource Collection of child as a Model Property of Parent.
I need to show a table with headers using ListBox
I searched on the web about how to create this and i found this answer, here is the XAML code i created:
<Grid Grid.Row="1" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="quantityColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="priceColumn"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="editColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="deleteColumn"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Cantidad</TextBlock>
<TextBlock Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Precio</TextBlock>
<TextBlock Grid.Column="2" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Descripción</TextBlock>
<TextBlock Grid.Column="3" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Editar</TextBlock>
<TextBlock Grid.Column="4" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Eliminar</TextBlock>
</Grid>
<ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Auto" Name="OrderList" Background="Transparent" BorderBrush="{x:Null}" ManipulationBoundaryFeedback="OrderList_ManipulationBoundaryFeedback">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Focusable" Value="False"/>
<EventSetter Event="RequestBringIntoView" Handler="ListBoxItem_RequestBringIntoView"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="quantityColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="priceColumn"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="editColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="deleteColumn"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Foreground="White" TextAlignment="Center" Margin="7">Cantidad</TextBlock>
<TextBlock Grid.Column="1" Foreground="White" TextAlignment="Center" Margin="7">Precio</TextBlock>
<TextBlock Grid.Column="2" Foreground="White" TextAlignment="Center" Margin="7">Descripción</TextBlock>
<TextBlock Grid.Column="3" Foreground="White" TextAlignment="Center" Margin="7">Editar</TextBlock>
<TextBlock Grid.Column="4" Foreground="White" TextAlignment="Center" Margin="7">Eliminar</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
And here is the c# code i created to test and populate the ListBox
List<OrderItem> orders = new List<OrderItem>();
orders.Add(new OrderItem() { a = "wash", b = "b" });
orders.Add(new OrderItem() { a = "the", b = "c" });
orders.Add(new OrderItem() { a = "car", b = "d" });
orders.Add(new OrderItem() { a = "wash", b = "b" });
OrderList.ItemsSource = orders;
Since the ListBox only shows 4 rows, it doesnt have to set a scrollbar, and the headers are almost 100% aligned with the table columns:
The problem worsens when i add more rows to the ListBox and the scrollbar appears:
As you can see the offset of each column with its header its too big. How can i tell the Grid.IsSharedSizeScope to be aware of the width of the scrollbar and to consider it to the headers width? What i need it's to have the table columns 100% aligned with the table headers.
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>
I'm looking to create a simple layout for a WPF project I'm working on.
I tried styling Datagrid and GridView's but none of them work as I want, plus I don't want items to be editable / selectable, or columns to be sorted or anything like that. Basically I just want a simple dynamic table layout with no bells and whistles.
Any advice on how to recreate this would be greatly appreciated.
Update: I need the number of rows to be dynamic based on an ObservableCollection
Use HeaderedItemsControl, XAML
<!-- templates -->
<DataTemplate x:Key="itemWithDeleteButton">
<Grid Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=DocumentName, Mode=OneWay}" />
<Button Grid.Column="1" Command="{Binding DeleteCommand}"/>
</Grid>
</DataTemplate>
<Style TargetType="{x:Type HeaderedItemsControl}" x:Key="DeletedGrid">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Document Name"
VerticalAlignment="Center"
FontWeight="Bold"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Actions"
VerticalAlignment="Center"
FontWeight="Bold"/>
<Grid Grid.Row="1" Grid.ColumnSpan="2" Width="Auto" Height="Auto" Background="White">
<ItemsPresenter/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- control -->
<HeaderedItemsControl Style="{StaticResource DeletedGrid}" Margin="0,0,0,10"
Grid.Row="4" Grid.ColumnSpan="2" ItemTemplate="{StaticResource itemWithDeleteButton}"
ItemsSource="{Binding GridData}">
ViewModel
public class GridItem
{
public string DocumentName { get; set; }
public ICommand DeleteCommand { get; set; }
}
public class MyViewModel
{
public ObservableCollection<GridItem> GridData { get; set; }
}
This is just something similar. For the second column you would probably use a button for Delete of maybe just click event on a TextBlock. To get that exact formatting is going to take some tweaking.
<ListView.View>
<GridView AllowsColumnReorder="False" x:Name="gvCurDocFields">
<GridViewColumn Width="120">
<GridViewColumnHeader Content="Field" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Text="{Binding Path=FieldDefApplied.FieldDef.DispName, Mode=OneWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumnHeader Content="Value" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextAlignment="Left" Margin="0" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Text="{Binding Path=DispValue, Mode=OneWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
You can use the Grid layout for this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" /> <!-- Header row -->
<RowDefinition Height="Auto" /> <!-- One for each row of data -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- Document Name column -->
<ColumnDefinition Width="200" /> <!-- Actions column -->
</Grid.ColumnDefinitions>
</Grid>