I have a list view in my XAML code for displaying items in a list, I would like to "select" on when I double click on it.
<ListView x:Name="sounds">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" DoubleTapped="select_cue({Binding})">
<TextBlock .../>
<Slider .../>
...
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I would like is the function in my C# code to be called when the StackPanel is "DoubleTapped".
public void select_cue(SoundCue cue) {
//find cue in list of cues
//make current cue point to passed in cue if it is in the list
}
However, when I try and compile this I get "Error: CS1026 ) expected". I have tried to search around for this functionality which I am sure exists (because similar styles of application APIs like AngularJS do have this functionality).
You need to change your mode of accessing items in a little different way.
<ListView x:Name="sounds">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" DoubleTapped="StackPanel_DoubleTapped">
<TextBlock .../>
<Slider .../>
...
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And your StackPanel_DoubleTapped Will be
private void StackPanel_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
//Since you are databinding your sounds, sounds.SelectedItem will be your selected cue.
}
Related
I have 3 List views. They are very similar. The only difference is that their ItemsSource binds to different variables. Is there a way to create a template list view with unknown ItemsSource, and I can pass a parameter to fill that ItemsSource?
My code is something like this:
<ListView Name="View1" ItemsSource={"Binding Student1"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
<ListView Name="View2" ItemsSource={"Binding Student2"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
<ListView Name="View3" ItemsSource={"Binding Student3"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
Edit:
I might have expressed my question in a wrong way. I would like to have a separate user control view called "StudentView":
<ListView ItemsSource=Parameter1>
<TextBlock Text={"Binding Name"}/>
</ListView>
So that in my main window, I can do something like this:
<local:StudentView Parameter1={"Binding Student1"}/>
You are on the right track with thinking about templating
What you are looking for is something called a ControlTemplate.
Your ControlTemplate would then target the ListView control and use the key word TemplateBinding to pass through the ItemsSource binding from your ListView
You would look to add this as a window resource as shown below.
<Window.Resources>
<ControlTemplate x:Key="ListViewTemplate" TargetType="ListView">
<ListView ItemsSource="{TemplateBinding ItemsSource}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ControlTemplate>
</Window.Resources>
This would enable you to use this template on your ListView controls as shown below
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList}"/>
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList1}"/>
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList2}"/>
Hope this gives you what you were looking for
I have to do a Master/Detail in UWP
1- If you're in Laptop:
The responsible GridView of show the data of this person appear.
So when you select a item is binded to ViewModel.
<ScrollViewer x:Name="ScrollLista" Grid.Column="0" Grid.Row="1">
<ListView x:Name="Lista" ItemsSource="{Binding Lista}" ItemClick="Lista_ItemClick" SelectedItem="{Binding PersonaSeleccionada, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding nombre}" />
<TextBlock Text="{Binding apellido}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
<Grid x:Name="CRUD" Grid.Column="1" Grid.Row="1" DataContext="{Binding PersonaSeleccionada}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
</Grid>
2- When is a mobile:
Only will appear the list and when I select a item this should be two things.
Call to ViewModel by binding using SelectedItem.
Call to code behind using ItemClick, this will be in charge of calling another page.
The problem: ItemClick not working, not call to Lista_ItemClick... How can I call a method and send the item selected to code behind?
For click event to work, IsItemClickEnabled="True" should be added to the ListView.
I have this template (c# windows univeral app w8.1)
<ListView ItemsSource="{Binding SelectedSongStanzas}">
<ListView.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding Verses}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Left">
<TextBlock Padding="0" Text="{Binding Harmonization2}" FontFamily="Lucida Console" FontSize="16" Foreground="BlueViolet" VerticalAlignment="Bottom"/>
<TextBlock Padding="0" Text="{Binding OriginalText}" FontFamily="Lucida Console" FontSize="16" VerticalAlignment="Top"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And This is how it look
If see at image the first list view item shows the first ListItem lines are together with no spaces between them, but the second line shows a big gap between them.
Note:
1) I'm ,was trying with Grid instead stackpanel but looks same way.
2) If Try fixed height texts could be cut.
What can i do to force all ListItems looks the same way?
(Just Like the firs Item)
EDIT ONE: Based on the comments think the problem could be the default styles from windows universal app template. And now could be another question.
How to edit / change / Override those styles on that template ?
Finally as #AnjumSKhan post, the problem wasn't at XAML code, just my structure Has a Literal char \n
Something like this "some text here" was stored as => "\nsome text here", just i remove those new lines literals an now all looks as must be.
I have a list view that will contain notes that I input. I am having trouble figuring out how to have the list view item look how I want it to.
Below is how it should look:
And this is what it currently looks like:
How do I write the list view item in XAML so that the Date and time appear to the very top-right of each list view item, with the text of the note to the left?
<ListView x:Name="list" ItemsSource="{Binding Note}" BorderBrush="{x:Null}" BorderThickness="0">
<DataTemplate>
<ListViewItem>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView>
Any help at all is much appreciated!
You are missing a number of elements required in order to get your screen to look the way you want.
You need to define the ItemTemplate for the ListView. You're on the right track here, it is a DataTemplate declared in XAML, you just have to apply it to the ListView.ItemTemplate property.
You need to set the HorizontalContentAlignment of the ListView to Stretch (the default is Left, which means your items will not fill the entire content area).
You need to use a DockPanel (or other similar panel) inside your DataTemplate to place your date content on the right, and the remainder of your content on the left.
You need to disable Horizontal Scrolling (ScrollViewer.HorizontalScrollBarVisbility) on the ListView in order to make your content wrap (otherwise it will just happily draw it all on one line).
I've included a sample ListView that should get you started.
<ListView
ItemsSource="{Binding Items}"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock
TextWrapping="Wrap"
Text="{Binding Date}"
Background="Magenta"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Content}" Background="Lime" />
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm interesting, can I group some controls (image, 2-3 textboxes) in one element, and then push group of this elements in listbox? I'm trying to make a news reader of russian social network Vkontakte into Windwos Phone 7.
Each news has an image, text, and some other metadata. So I want to group all this info in one control and use it in listbox.
I tryied to push a grid(which had an image and two textboxes) into listbox, but it throws XamlParseException.
Also, I need to get the content of theese textboxes and images from code. In grid I can use
<Grid.Resources>
<src:Customers x:Key="customers"/>
</Grid.Resources>
Here is what you need:
A collection (ObservableCollection<T> recommended) of models (News in you case).
A ListBox
A DataTemplate
Example:
XAML:
<ListBox Name="ListBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
...
<Image Source="{Binding ImagePropertyInModel}" ... />
<TextBlock Text="{Binding TextPropertyInModel}" ... />
...
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code behind:
ListBox1.ItemsSource = <collection of models>;
Instead of the <Grid> in <DataTemplate> you can use a Custom Control (Templated Control) or a User Control that you may already have.
You can create an UserControl with the controls you want to use. With your ListBox you do something like:
<ListBox ItemsSource="{Binding Path=YourItemsSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<my:MyUserControl DataContext="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As ItemsSource of your ListBox you could use a ObservableCollection of News and through DataContext="{Binding}" you can bind to the News properties in your UserControl, e.g.:
<UserControl...>
<Image Source="{Binding Path=photoAttachment}"/>
</UserControl>