Display vertical rows in a ListView

Question

Hi

If this question has already been posted, please could somebody post the link.

How to display vertical rows in a ListView?
My requirement is

1. Column headers and individual rows are oriented vertically
2. When the user adds a new item to the underlying collection, a new column is created instead in the listview to display the newly added item

Could anyone please help me?
Thank you

 

Answer 1

Is there any way you can provide some kind of drawing? There's generally no limit to what you can do in WPF, but I can't picture exactly what it is you're trying to accomplish.

-Drew

Answer 2

OK I have a sample code below which does what I want to achieve..

I have applied RotateTransform to render the individual rows in a vertically oriented way.

Also when an item (DateTime) is added to the collection to which the listview is bound to, a new column gets added to show the newly added item.

But this is not the correct way to do it.. Because the scoll bar is above the list due to the transformation and when the cursor is in one textbox and user presses tab button, cursor goes to the field above in the same column. Actually the cursor should go to the field down below in the same column..

Actually I'm looking for a property in ListView or GridView which will enable me to achieve this easily.. But I'm not able to find it

Request you to suggest an alternate way which will match these requirements..

 

Window4.xaml

 

<Window x:Class="Temp.Window4"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication3" Height="300" Width="300" WindowState="Maximized" Loaded="OnInit" xmlns:ns="clr-namespace:Temp">

<Window.Resources>

<ns:DateCollection x:Key="Dates">

</ns:DateCollection>

</Window.Resources>

<Grid>

<Grid.Resources>

<Style TargetType="{x:Type TextBox}">

<Setter Property="LayoutTransform">

<Setter.Value>

<RotateTransform Angle="90"></RotateTransform>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="{x:Type ListView}">

<Setter Property="LayoutTransform">

<Setter.Value>

<RotateTransform Angle="270"></RotateTransform>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<StackPanel>

<Separator Height="200" Background="White"></Separator>

<ListView Name="lvv" HorizontalAlignment="Center" Background="AliceBlue" IsSynchronizedWithCurrentItem="True"

Height="300" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{StaticResource Dates}">

<ListView.Resources>

</ListView.Resources>

<ListView.View>

<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="My Dates">

<GridViewColumn Width="35">

<GridViewColumn.CellTemplate>

<HierarchicalDataTemplate>

<TextBox Text="{Binding Path=Year, Mode=OneWay}" />

</HierarchicalDataTemplate>

</GridViewColumn.CellTemplate>

<GridViewColumn.HeaderTemplate>

<HierarchicalDataTemplate>

<TextBlock Text="Year">

<TextBlock.LayoutTransform>

<RotateTransform Angle="90"></RotateTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</HierarchicalDataTemplate>

</GridViewColumn.HeaderTemplate>

</GridViewColumn>

<GridViewColumn Width="35">

<GridViewColumn.CellTemplate>

<HierarchicalDataTemplate>

<TextBox Text="{Binding Path=Month, Mode=OneWay}" />

</HierarchicalDataTemplate>

</GridViewColumn.CellTemplate>

<GridViewColumn.HeaderTemplate>

<HierarchicalDataTemplate>

<TextBlock Text="Month">

<TextBlock.LayoutTransform>

<RotateTransform Angle="90"></RotateTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</HierarchicalDataTemplate>

</GridViewColumn.HeaderTemplate>

</GridViewColumn>

<GridViewColumn Width="35">

<GridViewColumn.CellTemplate>

<HierarchicalDataTemplate>

<TextBox Text="{Binding Path=Day, Mode=OneWay}" />

</HierarchicalDataTemplate>

</GridViewColumn.CellTemplate>

<GridViewColumn.HeaderTemplate>

<HierarchicalDataTemplate>

<TextBlock Text="Day">

<TextBlock.LayoutTransform>

<RotateTransform Angle="90"></RotateTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</HierarchicalDataTemplate>

</GridViewColumn.HeaderTemplate>

</GridViewColumn>

</GridView>

</ListView.View>

</ListView>

<Separator Height="100" Background="White"></Separator>

<Button Width="200" Background="AliceBlue" Click="BtnAddClickHandler">Add Row</Button>

<Separator Height="10" Background="White"></Separator>

<Button Width="200" Background="AliceBlue" Click="BtnDeleteClickHandler">Delete Row</Button>

<Separator Height="10" Background="White"></Separator>

<Button Width="200" Background="AliceBlue" Click="BtnInsertClickHandler">Insert Row</Button>

</StackPanel>

</Grid>

</Window>

 

Window4.xaml.cs

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

namespace Temp

{

/// <summary>

/// Interaction logic for Window4.xaml

/// </summary>

public partial class Window4 : Window

{

public Window4()

{

}

private void OnInit(object sender, EventArgs e)

{

}

private void BtnAddClickHandler(object sender, EventArgs e)

{

DateCollection dc = (DateCollection)this.Resources["Dates"];

dc.AddNewItem();

}

private void BtnDeleteClickHandler(object sender, EventArgs e)

{

DateCollection dc = (DateCollection)this.Resources["Dates"];

dc.DeleteLastItem();

}

private void BtnInsertClickHandler(object sender, EventArgs e)

{

DateCollection dc = (DateCollection)this.Resources["Dates"];

int i = lvv.SelectedIndex;

dc.AddItemAt(i);

}

}

}

 

DateCollection.cs

using System;

using System.Collections.Generic;

using System.Text;

using System.Collections.ObjectModel;

namespace Temp

{

public class DateCollection :

ObservableCollection<DateTime>

{

System.Random r = new Random();

public DateCollection()

{

AddNewItem();

}

public void AddNewItem()

{

int Y = r.Next(2000, 2010);

int M = r.Next(1, 12);

int D = r.Next(1, 28);

this.Add(new DateTime(Y, M, D));

}

public void DeleteLastItem()

{

if (this.Count > 0)

{

this.RemoveAt(this.Count - 1);

}

}

public void AddItemAt(int index)

{

int Y = r.Next(2000, 2010);

int M = r.Next(1, 12);

int D = r.Next(1, 28);

if (index > -1 && index < this.Count)

{

this.Insert(index, new DateTime(Y, M, D));

}

else if (index >= this.Count)

{

this.Add(new DateTime(Y, M, D));

}

}

}

}

 

 

Answer 3

 

    I made some modification on your xaml and I hope it can meet you requirements:

<Window x:Class="Temp.Window4"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication3" Height="300" Width="300" WindowState="Maximized" Loaded="OnInit" xmlns:ns="clr-namespace:Temp">

<Window.Resources>

<ns:DateCollection x:Key="Dates">

</ns:DateCollection>

</Window.Resources>

<Grid>

<Grid.Resources>

<Style TargetType="{x:Type ListViewItem}">

<Setter Property="KeyboardNavigation.TabNavigation" Value="Local"></Setter>

<Setter Property="LayoutTransform">

<Setter.Value>

<RotateTransform Angle="180"></RotateTransform>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="{x:Type TextBox}">

<Setter Property="LayoutTransform">

<Setter.Value>

<RotateTransform Angle="90"></RotateTransform>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="{x:Type ListView}">

<Setter Property="LayoutTransform">

<Setter.Value>

<RotateTransform Angle="270"></RotateTransform>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<StackPanel>

<Separator Height="200" Background="White"></Separator>

<ListView FlowDirection="RightToLeft" Name="lvv" HorizontalAlignment="Center" Background="AliceBlue" IsSynchronizedWithCurrentItem="True"

Height="300" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{StaticResource Dates}">

<ListView.Resources>

</ListView.Resources>

<ListView.View>

<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="My Dates">

<GridViewColumn Width="35">

<GridViewColumn.CellTemplate>

<DataTemplate>

<TextBox TabIndex="3" Text="{Binding Path=Year, Mode=OneWay}" />

</DataTemplate>

</GridViewColumn.CellTemplate>

<GridViewColumn.HeaderTemplate>

<DataTemplate>

<TextBlock Text="Year">

<TextBlock.LayoutTransform>

<RotateTransform Angle="270"></RotateTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</DataTemplate>

</GridViewColumn.HeaderTemplate>

</GridViewColumn>

<GridViewColumn Width="35">

<GridViewColumn.CellTemplate>

<DataTemplate>

<TextBox TabIndex="2" Text="{Binding Path=Month, Mode=OneWay}" />

</DataTemplate>

</GridViewColumn.CellTemplate>

<GridViewColumn.HeaderTemplate>

<DataTemplate>

<TextBlock Text="Month">

<TextBlock.LayoutTransform>

<RotateTransform Angle="270"></RotateTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</DataTemplate>

</GridViewColumn.HeaderTemplate>

</GridViewColumn>

<GridViewColumn Width="35">

<GridViewColumn.CellTemplate>

<DataTemplate>

<TextBox TabIndex="1" Text="{Binding Path=Day, Mode=OneWay}" />

</DataTemplate>

</GridViewColumn.CellTemplate>

<GridViewColumn.HeaderTemplate>

<DataTemplate>

<TextBlock Text="Day">

<TextBlock.LayoutTransform>

<RotateTransform Angle="270"></RotateTransform>

</TextBlock.LayoutTransform>

</TextBlock>

</DataTemplate>

</GridViewColumn.HeaderTemplate>

</GridViewColumn>

</GridView>

</ListView.View>

</ListView>

<Separator Height="100" Background="White"></Separator>

<Button Width="200" Background="AliceBlue" Click="BtnAddClickHandler">Add Row</Button>

<Separator Height="10" Background="White"></Separator>

<Button Width="200" Background="AliceBlue" Click="BtnDeleteClickHandler">Delete Row</Button>

<Separator Height="10" Background="White"></Separator>

<Button Width="200" Background="AliceBlue" Click="BtnInsertClickHandler">Insert Row</Button>

</StackPanel>

</Grid>

</Window>

BTW: the I changed the DataTemplate, it does not affect the final result.

Thanks.

Answer 4

Thank you very much. This is exactly what I wanted..

One minor issue though, was the header and the items were not matching in this case.. But this can rectified by not setting the RotateTransform for the ListViewItem and by setting the RotateTransform angle for the TextBox to 270

Thanks

Answer 5

Is is possible to do the same in ASP.NET for a webform?