This is my simple code to do this:
<Grid>
<ListView>
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Source="c:\myimage.jpg" />
<TextBlock Text="Image Name"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
But except the empty header, nothing shows up.
This is my first time using GridView. Am I missing something ?
Your ListView has no items, the CellTemplate is applied to each item in the list and if there are no items nothing will be shown. Did you perhaps mean to change the Header instead?
If you are not binding a source then it is not going to generate any rows. Show your XAML or code behind for binding a source.
You probably don't want to use CellTemplate. Here is an intro-level example of ListView: http://www.switchonthecode.com/tutorials/wpf-tutorial-using-the-listview-part-1
Related
I am new to WPF and XAML..
I want to add an TreeView into a ListView Element with a CellTemplate..
I want to bind each ListViewItem to a Custom class called "Symbol"
This Class has an Property called "Name" and a Property called "Images".
"Name" is just a String, which should be the root Element of the TreeView..
"Images" is a List of Strings.
Each entry of this list should be an Children of this TreeView..
And please do not just leave a code snippet, i want to understand how CellTemplates work!
Thank you!
<Grid>
<ListView x:Name="listview" HorizontalAlignment="Left" Height="326" Margin="0,33,0,0" VerticalAlignment="Top" Width="499">
<ListView.View>
<GridView>
<GridViewColumn Header="Symbols" Width="200" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TreeView>
<!--
what to be done here?
-->
</TreeView>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="250" Margin="504,33,0,0" VerticalAlignment="Top" Width="250">
<Border x:Name="image_preview" HorizontalAlignment="Center" Height="250" VerticalAlignment="Center" Width="250"/>
</Border>
</Grid>
First you should bind ListView to a collection of Symbol objects.
Now, every cell of your ListView is bound to Symbol object. If I understand you correctly, each Symbol should be a TreeView with root node header displaying Name property and collection of children displaying Images strings.
This can be achieved this way:
<TreeView >
<TreeViewItem Header="{Binding Name}" ItemsSource="{Binding Images}" />
</TreeView>
I am trying to create a ListView with a GridView that has 2 columns: Name and Date, which are to be binded to a Person Object later on.
I want to use a DataTemplate, this template consists of a Label.
My problem is I want to use this template for both columns, but the content of the label is to be bind to a different property in each column. In short, I want to be able to bind the content of the label, in the GridViewColumn code block and not in the DataTemplate code block.
Thanks in advance for your help.
I tried it this way with empty binding in datatemplate which solved in my case..(didn't checked for object types with more than one property to be binded). This will work in the case of this question's context.
<DataTemplate x:Key="commonTemplate">
<Label Content="{Binding}" />
</DataTemplate>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Name}"
ContentTemplate="{StaticResource commonTemplate}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Date}"
ContentTemplate="{StaticResource commonTemplate}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Any better way or improvements are always welcome.. thank you
How do I access a control in XAML that is nested in a GridViewColumn.CellTemplate? By accessing the combo box I want to set its ItemsSource in the code behind.
Code:
<GridViewColumn Width="80">
<GridViewColumnHeader Content="UseCLUT"/>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Path=UseCLUT}" Style="{StaticResource GridBlockStyle}"/>
<ComboBox x:Name="combTrueFalse" SelectedItem="{Binding Path=UseCLUT}" Style="{StaticResource GridEditStyle}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
I have named the comboBox as combTrueFalse and tried to referenced it in the code behind but it could not be found.
I find a work around to the problem.
I have set the collection of the combo box to a class which contains the collection for the combox's selection.
The mainWindow class contains the data class's variable.
ItemsSource="{Binding ElementName=mainWindow, Path=data.comboxTFSmall}"
Meaning to say I have set the combox's item towards a Class which contains the collection and not from the code behind.
<GridViewColumn Width="80" >
<GridViewColumnHeader Content="UseCLUT"/>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Path=UseCLUT, Mode=TwoWay}" Style="{StaticResource GridBlockStyle}"/>
<ComboBox ItemsSource="{Binding ElementName=mainWindow, Path=data.comboxTFSmall}" SelectedValue="{Binding Path=UseCLUT}" Style="{StaticResource GridEditStyle}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Please do correct me if you find that my explanation is misleading thanks.
regards
If I were to say "the heck with it!", I could just give my ListView with SelectionMode="Multiple" a name, and be able to get all of the selected items very easily. But I'm trying to stick to MVVM as much as possible, and I want to somehow databind to an ObservableCollection that holds the value from the Name column for each selected item. How in the world do you do this? Single selection is simple, but the multi selection solution is not obvious to me with my current WPF / MVVM knowledge.
I read this question on SO, and while it does give me some good insight, I don't know how to add the necessary binding to a row, because I am using a ListView with a GridView as its View, not a ListBox.
Here's what my XAML basically looks like:
<ListView DockPanel.Dock="Top" ItemsSource="{Binding ClientPreview}" SelectionMode="Multiple">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="Name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Address">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Address}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
It sounds like the right thing to do is to databind each row's IsSelected property to each object stored in the ObservableCollection I'm databinding to. I just haven't figured out how to do this.
Write ItemContainerstyle on the ListView and put a Setter to do the binding to your ViewModel 'IsSelected' property
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected,Mode=OneWayToSource}"/>
I have the following XAML class:
<ListView Controls:ListViewColumns.Stretch="true"
Name="myListItems" SelectionMode="Single">
<ListView.View>
<GridView>
<GridViewColumn Width="50">
<GridViewColumn.Header>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Name="btnDelete"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Padding="0"
Margin="0"
IsEnabled="{Binding Converter={StaticResource inverseBoolConverter},
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type WO:OpCompTab}}, Path=DisableAll}"
Click="btnDelete_Click" Tag="{Binding Path=.}">
<Image Source="/Win7;component/Images/Icons/Remove.png"
Width="{StaticResource IconWidth}"
Height="{StaticResource IconHeight}" />
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
The listview gets populated by hooking an observable collection up to its ItemSource property. This generates a neat looking column of Delete buttons for each item in the observable collection.
But this presents a quandary: How do I access the "btnDelete" of an individual row of the ListView? I'd like to change its icon on a per-row basis. Is it just a matter of binding the observable collection to the cell template somehow?
Instead of hardcoding the Image.Source, bind it to a property in your row object. Another way is to create a value converter and pass in the row or some property if you can't or don't want to modify the row object to add an ImageSource property. Have the value converter return the correct image source based on the passed in property or some other logic.