I'm trying to create a custom ListBox. That receives a list with three properties:
SubjectName
Problems
AverageScore
The property Problems is another list which contains several Problem class. This is the data template I'm creating.
<DataTemplate x:Key="SubjectDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="5">
<StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
<TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
<TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Background="Aqua" Orientation="Vertical" Margin="5">
<Rectangle Fill="Red" Height="20" Width="20" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!--<TextBlock Text="{Binding Path=Role, FallbackValue=Role}" />-->
</StackPanel>
</Grid>
</DataTemplate>
But I've got a problem trying to show Problems data. I'm trying to show each element from Problems list in a stack panel with ortientation horizontal, but I get each stack panel separated.
I need to put the red rectangles inside the stack control. For example, the ten rectangles from Times Tables should be in one only stack panel.
UPDATE 1:
Something like this:
According to the graph, the first stack panel (background aqua) must contain 10 red rectangles.
UPDATE 2:
I'm verifying showing the data from problem in a textBlock and it works:
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding IsCorrect}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Gainsboro" Margin="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You need to use nested ItemsControls - One for the Vertical list and one for the Horizontal List.
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Height="20" Width="20" Margin="1,0">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsCorrect}" Value="True">
<Setter Property="Fill" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Aqua" Margin="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
In your ItemsControl.ItemsPanel make the StackPanel orientation Horizoantal
Is this what you are looking for?
UPDATED:
<DataTemplate x:Key="SubjectDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="5">
<StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
<TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
<TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
<ItemsControl ItemsSource="{Binding Problems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Rectangle Fill="Red" Height="20" Width="20" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Aqua" Orientation="Horizontal" Margin="5"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</Grid>
</DataTemplate>
Related
I have a grid that contains 2 controls, a dynamic grid and an expander. For some reason, with these column definitions, the expander expands but the second inner/dynamic grid doesn't not resize/shrink - i know it's something with the grid but i don't know what.
This is a snippet of the xaml:
<Grid Grid.Column="0" Grid.Row="1"
IsHitTestVisible="{Binding Path=(run),
Converter={StaticResource InverseBooleanConverter}}"
Name="mainGrid"
Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="{Binding GridWidth}" MinHeight="{Binding GridHeight}"
utils:SizeObserver.Observe="True"
utils:SizeObserver.ObservedHeight="{Binding GridHeight,
Mode=OneWayToSource}"
utils:SizeObserver.ObservedWidth="{Binding GridWidth,
Mode=OneWayToSource}">
<ItemsControl x:Name="eItemControl" ItemsSource="{Binding eCompositeCollection}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="wGrid" Grid.Row="1"
MinWidth="{Binding MinWidth, ElementName=mainGrid}"
MinHeight="{Binding MinHeight, ElementName=mainGrid}"
utils:GridHelper.RowCount="{Binding RowCount}"
utils:GridHelper.StarRows="{Binding StarRows}"
utils:GridHelper.ColumnCount="{Binding ColumnCount}"
utils:GridHelper.StarColumns="{Binding StarColumns}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type engine:Wodel}">
<ToggleButton
Tag="{Binding}"
Height="{Binding ElementName=eItemControl,
Path=DataContext.nHWidth}"
Width="{Binding ElementName=eItemControl,
Path=DataContext.nHWidth}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{Binding ElementName=eItemControl,
Path=DataContext.BMargin}"
Padding="2"
Style="{StaticResource Wbutton}">
</ToggleButton>
</DataTemplate>
<DataTemplate DataType="{x:Type erModel}">
<TextBlock Text="{Binding jName}" Style="{StaticResource GridHeaders}"/>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
<ItemsControl ItemsSource="{Binding huil}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}"
Visibility="{Binding Visibility}">
<Rectangle.RenderTransform>
<TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
</Rectangle.RenderTransform>
</Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Expander Grid.Column="1" Grid.Row="1" IsExpanded="False" ExpandDirection="Right">
// SOME EXPANDER CODE
</Expander>
And the original Grid definitions in the parent grid that these are both in:
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
If anyone can please help as I really don't know where to go from here and what the problem may be...
Removing this from the parent grid fixed it.... trying to figure out why... ?
MinWidth="{Binding GridWidth}" MinHeight="{Binding GridHeight}"
I managed to create this table using stackpanels and itemscontrols but it takes ages to load after all. In my ViewModel I have a list of hotels which contain rooms. Every room for every day in a range I set can be booked or not etc. So in my View I need to show the this data in a dynamic table (?) where every row will have each hotel then each hotel will have each room, then columns of months and every date etc as you can see in picture. At last every square is a button with a tool-tip showing more info and if clicked it has to select the row and column. I managed to do this for the column by setting the bolder color. Everything works but I thing this is not a correct implementation and it also needs to much time to render.
Here is my output
and the xaml
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<Border BorderBrush="Black"
BorderThickness="1"
Visibility="{Binding IsPlanVisible, Converter={StaticResource BoolToVisibilityConverter}}"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Border Width="150"
BorderBrush="Black"
BorderThickness="0,0,0,1">
<TextBlock Text="Hotel"
Margin="5,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border BorderBrush="Black"
Width="110"
BorderThickness="1,0,1,1">
<TextBlock Text="RoomType" Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ItemsControl ItemsSource="{Binding Months}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--<Border>-->
<StackPanel Orientation="Vertical"
Background="{Binding Background}">
<TextBlock Text="{Binding Name}"
MinHeight="30"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<ItemsControl ItemsSource="{Binding Days }">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black"
Width="22"
BorderThickness="0,1,1,1">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center" />
<ToggleButton Width="22"
HorizontalAlignment="Center"
IsChecked="{Binding IsSelected,UpdateSourceTrigger=PropertyChanged}"
Command="{Binding DataContext.ToggleDateCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding Date}">
<TextBlock Text="{Binding Date, StringFormat='{}{0:dd}' }"
HorizontalAlignment="Center" />
</ToggleButton>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!--</Border>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!--Hotels Item Control-->
<!--Each Row-->
<ScrollViewer Grid.Row="1"
Margin="0,-1,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<ItemsControl ItemsSource="{Binding FilteredPlanList}"
VerticalAlignment="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--Each Hotel-->
<Border BorderBrush="Black"
Width="150"
BorderThickness="0,1,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding Name}"
Padding="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<!--Rooms Row-->
<ItemsControl ItemsSource="{Binding Rooms}"
HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--Each Room Row-->
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Black"
Width="109"
BorderThickness="1,1,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding RoomType }"
Margin="0,1"
HorizontalAlignment="Center" />
</Border>
<!--Rectangles ItemSource-->
<ItemsControl ItemsSource="{Binding BookedInfoList}"
HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Background="{Binding Converter={StaticResource BConverter}}"
HorizontalAlignment="Stretch"
Width="22"
ToolTipService.IsEnabled="{Binding Reservation,Converter={StaticResource ToolTipVis}}"
BorderBrush="{Binding IsDateSelected,Converter={StaticResource BoolToBorderColorConverter}}"
BorderThickness="1,0,0,1">
<Button.InputBindings>
<MouseBinding Gesture="LeftDoubleClick"
Command="{ Binding DataContext.ViewReservationCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding Reservation}" />
</Button.InputBindings>
<Button.ToolTip>
<StackPanel>
<Grid Margin="0,0,0,5"
DataContext="{Binding Reservation}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170" />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<!--Row 0-->
<Border BorderBrush="Black"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Stretch"
BorderThickness="1">
<TextBlock Text="{Binding Dates}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5,0" />
</Border>
<Border BorderBrush="Black"
Grid.Row="0"
HorizontalAlignment="Stretch"
Grid.Column="1"
BorderThickness="0,1,1,1"></Border>
<Border BorderBrush="Black"
Grid.Row="1"
Grid.Column="0"
HorizontalAlignment="Stretch"
BorderThickness="1,0,1,1">
<TextBlock Margin="5,0"
HorizontalAlignment="Center"
Text="{Binding Room.Hotel}" />
</Border>
<Border BorderBrush="Black"
Grid.Row="1"
HorizontalAlignment="Stretch"
Grid.Column="1"
BorderThickness="0,0,1,1">
<TextBlock Margin="5,0"
HorizontalAlignment="Center"
Text="{Binding Room.RoomType}" />
</Border>
<!--Row 2-->
<Border BorderBrush="Black"
Grid.Row="2"
Grid.Column="0"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"
BorderThickness="1,0,1,1">
<TextBlock Text="{Binding Names}"
Margin="5,0"
FontSize="10"
HorizontalAlignment="Left" />
</Border>
</Grid>
</StackPanel>
</Button.ToolTip>
</Button>
<!--</Border>
</Border>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Border>
</ScrollViewer>
I have a table with cells, where values can be inserted. Table is generated dynamically, based on data. Table size is limited by the grid, where it is located. If data is too much, then appears a horizontal scroll bar.
This is implemented with ItemsControl in the ScrollViewer.
<ScrollViewer
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Data}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<ItemsControl ItemsSource="{Binding Value}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.ColumnDefinitions>
<TextBox
Text="{Binding Value.TotalTime}"
HorizontalContentAlignment="Right" BorderThickness="0" Margin="1,1,0,0"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
The problem happens, when we scroll the table to the right and select some cell (TextBox). If we do this, then ScrollViewer will return to the most left position.
It's better to have an integrated ScrollViewer inside the ItemsPanel itself than wrapping a ScrollViewer around it. From my experience, you tend to have more issues. Update your Template to have the ScrollViewer instead.
<ItemsControl ItemsSource="{Binding Data}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<ItemsControl ItemsSource="{Binding Value}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.ColumnDefinitions>
<TextBox
Text="{Binding Value.TotalTime}"
HorizontalContentAlignment="Right" BorderThickness="0" Margin="1,1,0,0"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a Grid column and I have a list view in it. I am populating it from a form which is found in a another column. The values entered in the form gets saved to a list. I want that list displayed in the list view. When the text entered in the form increases the remaining values gets disappeared. I want that column to scroll horizontally so the values don't get disappeared.
This is what I have tried so far..
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Margin="0,0,-60,10">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Someone please help me do this.
Any kind of help is appreciated....
Have you tried to do that w/o the ScrollViewer Control? and Enable the horizontal scroll mode?
Try this:
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0" ScrollViewer.HorizontalScrollMode="Enabled" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Adding ScrollViewer.HorizontalScrollMode="Enabled" & Removing the ScrollViewer control ..
UPDATE:
You can achieve that without using columns.. here's my try:
<Grid x:Name="rootGrid">
<ScrollViewer HorizontalScrollMode="Enabled" >
<StackPanel Orientation="Horizontal" >
<Grid x:Name="form" >
<!-- your form here.. -->
</Grid>
<Grid x:Name="list" >
<!-- your listview here.. -->
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
Good luck :)
I was unable to find a solution for this problem:
I am creating my own table with ItemControls. To resize the columns I'd like to bind the Width-property of one cell to the corresponding ActualWidth-property of the column.
I tried the following, but it is not working:
<StackPanel Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="1">
<ItemsControl ItemsSource="{Binding Data.Columns}" Margin="26,1,1,1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- here i set the name of the column (Code) -->
<Border BorderBrush="Black" BorderThickness="1,0,0,0" Width="100" x:Name="{Binding Code}">
<TextBlock Text="{Binding Header}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<ItemsControl ItemsSource="{Binding Data.Rows}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1,0,1,1">
<StackPanel Orientation="Horizontal" Margin="1">
<Grid Width="25">
<General:SeverityIconControl Severity="{Binding Severity}" />
</Grid>
<ItemsControl ItemsSource="{Binding Values}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- and here i'd like to bind to the ActualWidth of the corresponding column (Code)
but it is not working because ElementName={Binding LocalCode} does not work -->
<Border BorderBrush="Black" BorderThickness="1,0,0,0" Width="{Binding ActualWidth, ElementName={Binding LocalCode}}">
<TextBlock Text="{Binding Value}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Is there a way to solve this without changing the data source (unfortunately the data source cannot be edited)?
You can't bind x:Name (more info here) since it's only read when you call InitializeComponent() in the constructor.
Easiest way would be to add a DesiredWidth column to your Data object, and bind both widths to that (with a default value of 100).