I have listbox that displays information about list of objects:
<ListBox Grid.Column="0" Height="152" Name="CustomersList" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I would show more detailed information about selected item in another block, but I don't know (and can't find) how to bind selected item to those block data context. I guess it should be something like this:
<Grid Grid.Column="1" DataContext="{Binding Path=ItemSelected, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Id" VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=Id}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Name" VerticalAlignment="Center"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=Name}" VerticalAlignment="Center"/>
<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="Add new" />
<Button Content="Store changes" />
</StackPanel>
</Grid>
But the problem is that data item to be binded to the grid is not specified anywhere and I don't know how to do that.
Any suggestion would be wellcome.
Thanks!
P.S. I've tried to specify CustomersList.ItemsSource as DataContext for the Grid - this didn't give any result.
You can bind to the SelectedItem property of the ListBox, one way is using ElementName.
<Grid DataContext="{Binding ElementName=CustomersList, Path=SelectedItem}"> </Grid>
Related
I have a tabcontrol with 3 tabs on it. Each tabitem contains a different contentcontrol, all of which are bound to the same ViewModel, and there are some items in all 3 contentcontrols that are bound to the same property.
My problem is, if I change a comboBox on the initial tab, that change is not reflected on the other tabs, they still have their SelectedItem set to the default value. This only happens the first time I switch to that tab. After I have selected a tab once, everything works as expected; changes made on one tab are reflected on the other tab.
I am trying to avoid too much code-behind, and I have searched and tried all of the solutions regarding delaying of the binding, or updating the binding when the tab is selected, but I have had no luck.
Here is my TabControl:
<TabControl Grid.Row="1" Margin="0,10">
<TabItem Header="Tab1" IsSelected="True">
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource Tab1}" />
</TabItem>
<TabItem Header="Tab2">
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource Tab2}" />
</TabItem>
<TabItem Header="Tab3">
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource Tab}" />
</TabItem>
</TabControl>
And here is one of the ContentControls:
<DataTemplate x:Key="Tab3" DataType="{x:Type vm:MainViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Flow" Style="{StaticResource tabLabel}" />
<TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource tabTextBox}" />
<ComboBox Grid.Column="2" Grid.Row="0" Style="{StaticResource tabUnitComboBox}" ItemsSource="{Binding DataList1}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData1}" />
<ComboBox Grid.Column="0" Grid.Row="1" Style="{StaticResource tabComboBox}" ItemsSource="{Binding DataList2}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData2}" />
<TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource tabTextBox}" />
<Label Grid.Column="2" Grid.Row="1" Content="m³/h" Style="{StaticResource tabUnitLabel}" Visibility="{Binding SelectedData2, Converter={StaticResource VisibilityConverter}}" />
<ComboBox Grid.Column="0" Grid.Row="2" Style="{StaticResource tabComboBox}" ItemsSource="{Binding DataList3}" SelectedItem="{Binding SelectedData3}" />
<TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource tabTextBox}" />
<ComboBox Grid.Column="2" Grid.Row="2" Style="{StaticResource tabUnitComboBox}" ItemsSource="{Binding DataList4}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData4}" />
<Label Grid.Column="0" Grid.Row="3" Content="Temperature" Style="{StaticResource tabLabel}" />
<TextBox Grid.Column="1" Grid.Row="3" Style="{StaticResource tabTextBox}" />
<ComboBox Grid.Column="2" Grid.Row="3" Style="{StaticResource tabUnitComboBox}" ItemsSource="{Binding DataList5}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData5}" />
</Grid>
</DataTemplate>
The ViewModel is pretty much standard, inheriting from ObservableObject and implementing OnPropertyChanged. As I said, everything works perfectly after selecting a tab once, but I would really like to get it working from the start.
Any suggestions would be greatly appreciated. Thanks.
In case you want to use that comment as and answer
Are you by any chance just starting with assigning the backing field.
Not firing INPC on the initial load.
I'm new to wpf and have what I hope is a simple question.
I have created a simple template to display some grouped items
Currently when I click on one of the items ItemsClick is called (as expected)
private void itemGridView_ItemClick(object sender, ItemClickEventArgs e)
{
MyCustomClass selectedItem = (MyCustomClass)e.ClickedItem;
GridView g = (GridView)sender;
I can get a copy of the class object by casting e.ClickedItem and the grid from sender. But what I don't see is how to I get a reference to the custom items I added in the template for example if I wanted to change the text in the testName TextBlock ?
Template:
<DataTemplate x:Key="MyTestTemplate">
<Grid HorizontalAlignment="Left" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Grid.RowSpan="3">
<Image Source="{Binding ThumbnailUrl}" Stretch="Fill" Width="175" Height="175" />
</Border>
<Image Source="{Binding MyCustomImage}" Height="30" Width="30" Grid.RowSpan="3" Margin="0,0,0,30"/>
<Grid x:Name="ItemDetails" VerticalAlignment="Bottom" Height="75" Margin="0,0,0,2" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="testName" Text="{Binding Name}" Grid.Row="0" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" MaxWidth="100" MaxHeight="80" TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource TitleTextStyle}" Margin="5,0,5,0"/>
<TextBlock Text="{Binding Address}" Grid.Row="0" HorizontalAlignment="Right" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource
CaptionTextStyle}" TextWrapping="NoWrap" Margin="5,0,5,0" />
</Grid>
</Grid>
</DataTemplate>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyTestTemplate}"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
RightTapped="itemGridView_RightTapped"
ItemClick="itemGridView_ItemClick" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding state}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Ok I found the answer on msdn.
The link here http://msdn.microsoft.com/en-us/library/bb613579.aspx
The basic steps
get the selected item (I was responding to click so this info was easy), find the ContentPresenter within that Item, and then call FindName on the DataTemplate that is set on that ContentPresenter.
OK... so this solution doesn't help
XAML is here
<ListBox ItemsSource="{Binding Path=ContentItems}" Background="White" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2" Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label VerticalAlignment="Center" Margin="0,0,0,5">Start</Label><svl:TimeEditor Value="{Binding Path=FormatedStart}" Width="87" HorizontalAlignment="Left" Margin="2,8" Name="dtpStart" FontSize="12" Height="25" VerticalAlignment="Center" />
<Label VerticalAlignment="Center" Margin="0,0,0,5">End</Label><svl:TimeEditor Value="{Binding Path=FormatedEnd}" Width="87" HorizontalAlignment="Left" Margin="2,8" Name="dtpEnd" FontSize="12" Height="25" VerticalAlignment="Center" />
</StackPanel>
<TextBlock Grid.Row="1" TextWrapping="Wrap" Name="tbText" Text="{Binding Path=Data}"></TextBlock>
</Grid>
<Grid Grid.Column="1" Visibility="Collapsed">
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The following will helps for text wrapping:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Well your TextBlock does not need to wrap since your specifying Width as Auto for it's ColumnDefinition which allows it to take all the Width it needs to fit Content even at the cost of overflowing. You either need to set the Column's Width to "*" to allow the TextWrapping to kick in when requested width exceeds allowable or manually force a MaxWidth on it using a Binding like
<TextBlock Name="tbText" Grid.Row="1" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" Text="{Binding Path=Data}" TextWrapping="Wrap" />
I have some data presented in WPF Grid as follows:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5" Style="{StaticResource SectionNumber}" Content="1.3"/>
<Label Grid.Row="1" Grid.Column="0" Margin="5 2">Number of grid in X:</Label>
<Label Grid.Row="1" Grid.Column="1" Margin="5 2">NX</Label>
<lib:NumericTextBox Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Margin="5 2" Text="{Binding Parameters.NX}"/>
<Label Grid.Row="2" Grid.Column="0" Margin="5 2">Number of grid in Y:</Label>
<Label Grid.Row="2" Grid.Column="1" Margin="5 2">NY</Label>
<lib:NumericTextBox Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" Margin="5 2" Text="{Binding Parameters.NY}"/>
<Label Grid.Row="3" Grid.Column="0" Margin="5 2">Type of data:</Label>
<Label Grid.Row="3" Grid.Column="1" Margin="5 2">MD</Label>
<ComboBox x:Name="cmbMD" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Margin="5 2" SelectedItem="{Binding Data.MD}"/>
<Label Grid.Row="4" Grid.Column="0" Margin="5 2">Data value:</Label>
<Label Grid.Row="4" Grid.Column="1" Margin="5 2">D</Label>
<TextBox Grid.Row="4" Grid.Column="2" Margin="5 2" Text="{Binding Data.D}"/>
<TextBox Grid.Row="4" Grid.Column="3" Margin="5 2" Text="{Binding Unit.LengthUnit, Mode=OneWay}" IsReadOnly="True" />
...
The problem is that I have hundreds of rows to write. In WinForms, I would probably write a user control to present a row of data, and I just need one line of code to create a row.
How can I simplify it here? Can DataTemplate help somehow? I know i can use DataTemplate in a listbox to make it easier. However, I need the columns to be aligned vertically, so I think Grid is the only way to go, right?
WPF ListView or DataGrid is the way to go.
I am writing a simple DataGrid XAML for you.
<DataGrid ItemsSource="{Binding YourCollection}" >
<DataGrid.Columns>
<DataGridTemplateColumn Header="YourColumnHeader1" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label Content="{Binding Property1}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="YourColumnHeader2" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<lib:NumericTextBox Text="{Binding Property2}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
It sounds like what you want is a DataGrid, not a Grid.
I have a listbox containing itemtemplate like this
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold" />
<TextBlock Text="{Binding [1]}"></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
</Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1" HorizontalAlignment="Right"></Button>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This listbox is in first column of a grid which has a splitter.
Now problem is that I am not able to align the button to right side of listbox item.
One Grid is enough here. You only need one star-sized column (for content) and one Auto-sized column (for the button):
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold"/>
<TextBlock Text="{Binding [1]}" ></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1"></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>