I want to sort Labels from an ItemsControl to my Grid.
When I bind the Grid.Row and Grid.Column properties, the position of the column and row is not effected.
What am I doing wrong?
Labels have the wrong positions in the grid
Here my View.xaml
<Window.Resources>
<vm:MainViewModel x:Key="MainVM"/>
</Window.Resources>
<DockPanel DataContext="{StaticResource MainVM}">
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ItemsControl
ItemsSource="{Binding MachineList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" Background="Gainsboro" BorderThickness="1" Margin="2">
<Label Content="{Binding SerialNumber}"
Grid.Column="{Binding StationNumber}"
Grid.Row="{Binding LineNumber}"
Margin="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Background="LightBlue"
/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DockPanel>
Here my MainViewModel.cs
public class MainViewModel: BaseViewModel
{
public ObservableCollection<Machine> MachineList { get; set; }
public MainViewModel()
{
Machine m1 = new Machine(0, "Row1 Column3", 1, 3, MachineType.SX);
Machine m2 = new Machine(0, "Row1 Column2", 1, 2, MachineType.SX);
Machine m3 = new Machine(0, "Row2 Column1", 2, 1, MachineType.SX);
MachineList = new ObservableCollection<Machine>();
MachineList.Add(m1);
MachineList.Add(m2);
MachineList.Add(m3);
}
}
The problem is that the ItemsControl displays the items in its own panel, which is no your grid so the grid property have no effect on the location of the items. The correct way to do this is to define your grid in the ItemsControl.ItemsPanel property like this:
<ItemsControl
ItemsSource="{Binding MachineList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" Background="Gainsboro" BorderThickness="1" Margin="2">
<Label Content="{Binding SerialNumber}"
Margin="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Background="LightBlue"
/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{binding ...}" />
<Setter Property="Grig.Column" Value="{binding ...}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
see here in the The ItemsPanelTemplate property section
Related
I have window which initially gets loaded with a list of item, based on list view item selection, I have to populate data in different user controls in the same window. I have one model which is common across all the user controls but they have separate user controls. Everytime when the data is filled , models gets initialized and data grid remains empty in the UI, even though the data is present at the back end.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="17*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1" BorderBrush="Black" Margin="5,5,5.4,5.2" Grid.ColumnSpan="2">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="0 3 0 3" BorderThickness="1" BorderBrush="Gray">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="310"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--ROW 2-->
<GroupBox Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Header="Rule Name" >
<ListBox ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible"
BorderBrush="Gray" BorderThickness="1"
Style="{x:Null}"
Name="lstSuggestedRule" SelectionMode="Single"
ItemsSource="{Binding RuleMetadata.SuggestedRuleList, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
SelectedItem="{Binding RuleMetadata.SelectedRule,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Margin="0 3 0 3" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Width="350" HorizontalAlignment="Stretch" Text="{Binding Path=ExpressionName}">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="SelectionChanged">
<interactivity:InvokeCommandAction Command="{Binding RuleSuggestionSelectionCommand}"
CommandParameter="{Binding Path= SelectedItems, ElementName=lstSuggestedRule}" />
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</ListBox>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="1" Header="Rule MetaData" Grid.ColumnSpan="2" >
<DockPanel>
<local:RuleSuggestionMetaData />
</DockPanel>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="1" Header="Rule Script" Grid.ColumnSpan="2">
<DockPanel>
<local:RuleSuggestionAvalonEditor HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter},ConverterParameter= VB}" Margin="0,10,0,10.2" Width="537" />
<local:RuleTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter} ,ConverterParameter= XML}" />
</DockPanel>
</GroupBox>
</Grid>
</Border>
<Grid Grid.Row="1" Grid.Column="1" Margin="0 0 10 3" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="3" Width="100"
Height="25" Margin="0,3,0,3"
ToolTip="Click to Cancel Operation"
Content="Close" Command="{Binding CancelRuleSuggestion}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" >
</Button>
</Grid>
</Grid>
</Border>
</Grid>
This is the grid structure, where on listbox selection item, I have to populate data into user control ,user control also uses same view model
<ScrollViewer Width="600"
Grid.Row="1"
PanningMode="Both"
extensions:TouchScrolling.IsEnabled="True"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Disabled">
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Width="175"
Grid.Row="0"
Grid.Column="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="170" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid MinWidth="{Binding ElementName=backgroundImage, Path=ActualWidth}" >
<StackPanel HorizontalAlignment="Center"
Orientation="Horizontal" >
<Image Height="160"
Source="man.png" />
</StackPanel>
</Grid>
</Grid>
<TextBlock TextWrapping="Wrap"
Grid.Row="1"
FontSize="10"
Text="Bomber jacket..." />
</Grid>
</Border>
<Border Width="175"
Grid.Row="0"
Grid.Column="1">...
</Border>
<Border Width="175"
Grid.Row="0"
Grid.Column="2">...
</Border>
<Border Width="175"
Grid.Row="0"
Grid.Column="3">...
</Border>
</Grid>
</ScrollViewer>
I have above xaml. In scrollViewer i have some items. I want to initialize it with data from database. How to do this?
I need to screate some ItemControl for common XAML and bind to properties. But how can i manage to bind every item in list to be binded to that ItemControl ?
I found this topic where i understand how to build same xaml for list items, but one problem is there - How to set Grid.Column for each item?
An ItemsControl is used to draw a UI for a collection of items.
So to start with, you need your collection of items from the database.
public ObservableCollection<MyItem> MyCollection { get; set; }
To draw this using an ItemsControl, you would use XAML like this :
<ScrollViewer Height="100">
<ItemsControl ItemsSource="{Binding MyCollection}" />
</ScrollViewer>
This will use the default UI for an ItemsControl, which is to loop through each item in the collection, and for each one render a TextBlock with the Text property displaying the .ToString() of the item.
So what actually renders is something like
<ScrollViewer>
<StackPanel>
<TextBlock /> <!-- DataContext is MyCollection[0] -->
<TextBlock /> <!-- DataContext is MyCollection[1] -->
<TextBlock /> <!-- DataContext is MyCollection[2] -->
</StackPanel>
</ScrollViewer>
The ItemsControl lets you modify different parts of the template though.
For example, to change the <StackPanel> in the XAML above, you would set the ItemsPanel property to use a Grid instead.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Or to change the TextBlock to something else, you could change the ItemTemplate
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="175" ...>
<TextBlock Text="{Binding Name}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
This would make your output render something like this
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Width="175" ...> <!-- DataContext is MyCollection[0] -->
<TextBlock Text="{Binding Name}" />
</Border>
<Border Width="175" ...> <!-- DataContext is MyCollection[1] -->
<TextBlock Text="{Binding Name}" />
</Border>
<Border Width="175" ...> <!-- DataContext is MyCollection[2] -->
<TextBlock Text="{Binding Name}" />
</Border>
</Grid>
</ScrollViewer>
To set Grid.Column, it's actually a bit trickier. An ItemsControl actually wraps each item in a <ContentPresenter> so each item in the XAML above would actually render more like this :
<ContentPresenter>
<Border Width="175" ...> <!-- DataContext is MyCollection[0] -->
<TextBlock Text="{Binding Name}" />
</Border>
</ContentPresenter>
To set a property like Grid.Column, it needs to be set on the ContentPresenter that wraps each item. And that's what the ItemContainerStyle is used for.
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column"
Value="{Binding ColumnIndex}" />
<Setter Property="Grid.Row"
Value="{Binding RowIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
So assuming you were binding to
public ObservableCollection<MyItem> MyCollection { get; set; }
and MyItem looked like this
public class MyItem
{
public int RowIndex { get; set; }
public int ColumnIndex { get; set; }
public string Name { get; set; }
}
Your final XAML might look something like this
<ItemsControl ItemsSource="{Binding MyCollection}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column"
Value="{Binding ColumnIndex}" />
<Setter Property="Grid.Row"
Value="{Binding RowIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
<!-- ItemTemplate -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="175" ...>
<TextBlock Text="{Binding Name}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And it would render something like this :
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- DataContext is MyCollection[0] -->
<ContentPresenter Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}">
<Border Width="175" ...>
<TextBlock Text="{Binding Name}" />
</Border>
</ContentPresenter>
<!-- DataContext is MyCollection[1] -->
<ContentPresenter Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}">
<Border Width="175" ...>
<TextBlock Text="{Binding Name}" />
</Border>
</ContentPresenter>
<!-- DataContext is MyCollection[2] -->
<ContentPresenter Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}">
<Border Width="175" ...>
<TextBlock Text="{Binding Name}" />
</Border>
</ContentPresenter>
</Grid>
</ScrollViewer>
If i'm right what you mean is that you want to bind a list of items to your xaml. To do this you can use a GridView.
In a Gridview you bind a list of items and define a template for each of these items.
<GridView ItemsSource="{Binding MyList}">
<Gridview.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding foo}"/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
As you can see. the gridview items template defines how each item in the list is going to be displayed. When you overwrite the itemspanel you can set MaximumRowsOrColumns and Orientation to define how many items each row will have and which way the rows are facing.
I have a databound list box and a text block in my application
Initially the listbox will be populated with some values (More than 10 values). i tried to scroll the list. But I couldn't. When I Click on the list and drag the mouse up, the list goes further down. The effect is more or like pulling down the list.
The xaml code is as follows. please help.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ScrollViewer Grid.Row="1">
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Thank you.
Your ScrollViewer is currently wrapped around only the ListBox. Bearing in mind the ListBox has its own ScrollViewer this will result in unpredictable behaviour.
I would wrap your Grid with a ScrollViewer and disable the ListBox one so that you can scroll your TextBlock and ListBox smoothly.
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
I achieved what i wanted. I didn't even need to include the scroll viewer. I just needed to change the row definition of the grid (row of the list box) from 'auto' to '*'. That worked as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I am having problems getting the scrollbars to show in my InfoWindow. Code is below. Any help would be appreciated.
XAML:
<DataTemplate x:Key="MyFeatureLayerInfoWindowTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding Keys}" Grid.Column="0" />
<ItemsControl ItemsSource="{Binding Values}" Grid.Column="1" />
</Grid>
</DataTemplate>
<esri:InfoWindow x:Name="MyInfoWindow"
CornerRadius="20"
ContentTemplate="{StaticResource MyFeatureLayerInfoWindowTemplate}"
Map="{Binding ElementName=MyMap}"
MouseLeftButtonUp="MyInfoWindow_MouseLeftButtonUp"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
MaxHeight="200"
MaxWidth="200"/>
C#:
if (clickpoint != lastPoint)
{
MyInfoWindow.Anchor = clickpoint;
MyInfoWindow.Content = e.Graphic.Attributes;
MyInfoWindow.IsOpen = true;
lastPoint = clickpoint;
}
Picture of what I am seeing:
The content appears in the InfoWindow, but the scrollbars are nowhere to be found. Hopefully it is something simple, I feel like I have tried everything. Thanks in advance.
Try this
<DataTemplate x:Key="MyFeatureLayerInfoWindowTemplate">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding Keys}" Grid.Column="0" />
<ItemsControl ItemsSource="{Binding Values}" Grid.Column="1" />
</Grid>
</ScrollViewer>
</DataTemplate>
I mean: wrap the grid inside a ScrollViewer
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>