I have two questions.
Q1: I have a ListView and I want OnSelectedItem to expand the attributes and show more attributes. Is this possible? How? [I have the attributes in the ObservableCollection]
Q2: I want to put a clickable image inside the view, that will change ViewModel (chat behavior). Is this possible? How?
ListView
<ListView x:Name="dataGrid" ItemsSource="{Binding Friends}" Height="314" BorderThickness="0" SelectedItem="{Binding SelectedItemFriends}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Resources\Images\ic_status.png" Height="24" Width="18"/>
<StackPanel Margin="5" Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="{Binding name}"/>
<TextBlock Text="{Binding lastLocation}"/>
<TextBlock Text="{Binding timestamp}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
A1: In datatemplate, create how you would like the extended attributes to appear and place them in a container such as a stack panel.
Then use an DataTrigger using the IsSelected property to change the visibility of the stack panel container from visible and collapsed as needed.
A2: The easiest way would be to use a Button with the content source set to an image as this will give you the click event/command binding to play with.
EDIT: Example of the first answer could look like:
<ListView x:Name="dataGrid" Height="314" BorderThickness="0" SelectedItem="{Binding SelectedItemFriends}" ItemsSource="{Binding Friends}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Image Source="Resources\Images\ic_status.jpg" Height="24" Width="18"/>
<StackPanel Margin="5" Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="{Binding Name}"/>
<StackPanel x:Name="AdditionItems" Orientation="Vertical" Visibility="Collapsed">
<TextBlock Text="{Binding LastLocation}"/>
<TextBlock Text="{Binding TimeStamp}"/>
</StackPanel>
</StackPanel>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="true">
<Setter TargetName="AdditionItems" Property="Visibility" Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have run this code and it works for me, it should be enough to put you on the right track. The important things to note are that the trigger is attached to the ListViewItem, it will trigger when it the IsSelected property turns true, it will then change the visibility of the StackPanel called "Additional Items" to visible from collapsed.
Related
I've got a horizontal stackpanel on which I add items. I would like to add a separator below each project name, rather than it being to the right of the name, and that separator should span the whole page. These 2 questions haven't helped me up to now: How to add a vertical Separator? How can a separator be added between items in an ItemsControl
The View code is:
<ListView ItemsSource="{Binding Projects}" Margin="49,188,54,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="EventSetter_OnHandler"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentControl Content="{StaticResource Appbar_Suitcase}"/>
<Label Content="{Binding Name}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
make the first stackpanel vertical and put the content control and the label inside of a horizontal stackpanel. something like this:
<StackPanel>
<StackPanel Orientation="Horizontal">
<ContentControl Content="{StaticResource Appbar_Suitcase}" />
<Label Content="{Binding Name}"/>
</StackPanel>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
</StackPanel>
I have a ComboBoxthat I have templated to look like this:
Here is the XAML for this ComboBox:
<ComboBox Name="StateInclusionRules_ComboBox"
ItemsSource="{Binding StateInclusionRules}"
Height="25"
Width="155"
Margin="0"
Grid.Column="7">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="0">
<Label Content="{Binding State}"
Margin="0,0,0,0"
Width="30" />
<CheckBox IsChecked="{Binding StateTax}"
Margin="20,0,0,0"/>
<CheckBox IsChecked="{Binding StateChildSupport}"
Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Is there a way to prevent the selected item from being displayed in the ComboBox ContentPresenter (the red bordered area, i.e, the area you see when the ComboBox is closed)?
First you need 2 DataTemplates, 1 for the selected item and 1 for the drop down item.
The selected we are going to leave empty because this is your requirment.
The drop down item DataTemplate will have the exact DataTemplate you wanted.
When item is selected a DataTrigger will change it's template to the SelectedTemplate, like so:
<Window.Resources>
<DataTemplate x:Key="DropDownItemTemplate" DataType="wpfApplication1:ItemSourceModel">
<StackPanel Orientation="Horizontal"
Margin="0">
<Label Content="{Binding Value}"
Margin="0,0,0,0"
Width="30" />
<CheckBox IsChecked="{Binding Value}"
Margin="20,0,0,0"/>
<CheckBox IsChecked="{Binding Value}"
Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate">
</DataTemplate>
<DataTemplate x:Key="ComboBoxTemplate">
<ContentPresenter x:Name="Presenter"
Content="{Binding}"
ContentTemplate="{StaticResource DropDownItemTemplate}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,ComboBoxItem,1}}" Value="{x:Null}">
<Setter TargetName="Presenter" Property="ContentTemplate" Value="{StaticResource SelectionBoxTemplate}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
And set your ComboBox with the ComboBoxTemplate:
<ComboBox Name="StateInclusionRules_ComboBox"
ItemsSource="{Binding YourItemSource}" ItemTemplate="{StaticResource ComboBoxTemplate}"
Height="25"
Width="155"
Margin="0"
/>
I have issue, i just try to make chat window with messages(From right incoming and from left sended out) but seems like stackpanel ignore HorizontalAlignment. Here's my code
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap"
FontSize="22"
Text="{Binding MessageTextIn}"
/>
<TextBlock
FontSize="10"
Text="{Binding MessageTimeIn}" Padding="10"
/>
</StackPanel>
<StackPanel HorizontalAlignment="Right">
<TextBlock TextWrapping="Wrap"
FontSize="22"
Text="{Binding MessageTextOut}"
/>
<TextBlock
FontSize="10"
Text="{Binding MessageTimeOut}" Padding="10"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Seems like i do something wrong but what exactly?
Thanks for any help!
Sorry if i ask something stupid.
That is because your ItemContainer only has a right alignment (by default).
Set the ItemContainerStyle of your Listview:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I've got the following XAML which is intended to put the row number in the left column but all that gets output is 0
<ListBox
VirtualizingPanel.VirtualizationMode="Recycling"
ItemsSource="{Binding MoineauPumpFlanks.Stator.Flank.Boundary, Mode=OneWay}"
AlternationCount="2147483647"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock
Text="{Binding RelativeSource={RelativeSource Mode=Self},
Path=(ItemsControl.AlternationIndex)}"
Margin="0,0,5,0"
/>
<!-- A custom control of mine -->
<Controls:LabelForPoint Point="{Binding}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Can anybody suggest what is wrong here?
The below does what I want
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
Path=TemplatedParent.(ItemsControl.AlternationIndex)}"
Margin="0,0,5,0"
/>
I'm trying to create fancy looking Listbox. ListBoxItems are supposed to expand after being selected, but the problem is, they're also supposed to contain another ListBox filled with some details about particular item and I have no idea how to put some data into it.
I've tried both accessing it from C# code and binding it in XAML but I'm still nowhere near the solution.
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path = Order}" Style="{StaticResource SampleListCellItem}" MinWidth="35"/>
<TextBlock Text="{Binding Path = FullName}" Style="{StaticResource SampleListCellItem}" Width="340"/>
<TextBlock Text="{Binding Path = FirstName}" Style="{StaticResource SampleListCellItem}" Width="200" />
<TextBlock Text="{Binding Path = BirthDate, StringFormat = d}" Style="{StaticResource SampleListCellItem}" Width="100"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right">
<ListBox Name="InnerList" Height="200" Width="200"/>
<Button Name="Button1" Height="40" Width="100" Content="ButtonText" Visibility="Visible"/>
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path = Order}" Style="{StaticResource SampleListCellItem}" MinWidth="35"/>
<TextBlock Text="{Binding Path = FullName}" Style="{StaticResource SampleListCellItem}" Width="340"/>
<TextBlock Text="{Binding Path = FirstName}" Style="{StaticResource SampleListCellItem}" Width="200" />
<TextBlock Text="{Binding Path = BirthDate, StringFormat = d}" Style="{StaticResource SampleListCellItem}" Width="100"/>
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</UserControl.Resources>
It sounds like what you're looking for is a tree. I think the TreeView control would be ideal for what you're looking for.
In your item that you want to display, I assume you have a property that is a list (of T) or other type that is compatible with a normal listbox itemsource. Let name it ListPr for the sake of example.
In your data template, add a listBox control and set the ItemsSource to {Binding Path = ListPr }. It should works just like that. In that new listbox, you will be able to define another data template, and so on.
Like it's mentioned in another post though, a treeview might be what you need in this case.
Hope that helps.