This question already has an answer here:
Databinding MediaPlaybackItem to ListView Item in DataTemplate
(1 answer)
Closed 5 years ago.
i want to use some of the MediaPlaybackItem properties(Artist , Title etc.) and bind them in the Listbox data template.Unfortunately MediaPlaybackItem can only access the meta of a song by calling MediaPlaybackItem.GetDisplayProperties().MusicProperties.Title;
In my ListView i have bind as a ItemSource observable list of MediaPlaybackItems :
<ListView x:Name="SongList" HorizontalAlignment="Left" Visibility="Visible" Height="773" Background="{Binding}"
Opacity="0.5" SelectedValue="selectedFile"
ItemsSource="{Binding MediaModels.ListOfMediaPlaybackItems , Mode=TwoWay , UpdateSourceTrigger=PropertyChanged}"
Then i have the ListView data template :
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderBrush="#404040" BorderThickness="0,0,0,2" HorizontalAlignment="Stretch"
Width="282" Height="80">
<Grid HorizontalAlignment="Left">
<TextBlock Text="{Binding MusicPropertiesTitle}" TextWrapping="WrapWholeWords"
Margin="82,10,10,0" />
<Grid Margin="0,0,-140,0">
<Image Source="Images/Album.png" Width="70" Height="70" Margin="0,0,350,0" />
</Grid>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I cannot find a way to bind each MediaPlaybackItem's property(MediaPlaybackItems .GetDisplayProperties().MusicProperties.Title;) to the TextBlock of the DataTemplate .
I hope you understand what i want! Your help is Greatly appreciated!
Best regards
I never use mediaPlaybackItems but would load each property you want into a class and load the class into the observable collection if i understood what you want correctly. If you need help doing that let me know.
Related
The main goal of the task to create AutoSuggest control.
In my case AutoSuggest control is custom control inherited from Grid
<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
xmlns:handlers ="clr-namespace:CrowdExchangeV2.Controls.Handlers"
WidthRequest="150">
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0"
...>
<handlers:BorderlessEntry Placeholder="{Binding Source={x:Reference this}, Path=Placeholder}"
WidthRequest="150"
.../>
</Frame>
<AbsoluteLayout
WidthRequest="150"
MaximumHeightRequest="100"
Grid.Row="1"
x:Name="resAl">
<ScrollView
MaximumHeightRequest="100"
MaximumWidthRequest="160"
x:Name="resSV">
<CollectionView x:Name="list">
<CollectionView.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout VerticalOptions="Center"
HorizontalOptions="Start">
<Label Text="{Binding Key}" Padding="0,0,4,0"/>
<Label Text="{Binding Value}"/>
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</AbsoluteLayout>
</Grid>
So, control looking for suggestions in Dictionary while user typing text in Entry. The thing is - when CollectionView updates suggestions it pushes all the other elements on ContentPage down... but suppose to overlay them. All right lets wrap Suggester in AbsoluteLayout on contentPage and setBounds to a desirable position. (PS: Suggester name is suggester 0_o)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
Title=" ">
<AbsoluteLayout x:Name="mainAbs">
<AbsoluteLayout Margin="0,0,0,0"
x:Name="suggestAl">
<suggester:Suggester Placeholder="USD"
SearchDictionary="{Binding SearchCurrency}"
MaximumHeightRequest="150"
MaximumWidthRequest="150"/>
</AbsoluteLayout>
<Grid Padding="10" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ScrollView>
<VerticalStackLayout>
...
<Frame HorizontalOptions="Fill">
<VerticalStackLayout>
...
<VerticalStackLayout HeightRequest="80"
x:Name="currVSL">
<Label Text="Currency out:"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="Header"
x:Name="curLbl"/>
**SUggester should be here**
</VerticalStackLayout>
</VerticalStackLayout>
</Frame>
</VerticalStackLayout>
</ScrollView>
</Grid>
</AbsoluteLayout>
</ContentPage>
The first idea is - to grab x:Name="currVSL" bounds, adjust it for size of Label, and place x:Name="suggestAl" there, but i cant get absolute position of x:Name="currVSL" only relative and in absolute terms it's wrong
I don't want to hardcode position in static numbers, because the position highly depends on a particular device.
So the question is how to achieve a desirable result - Place x:Name="currVSL" under the x:Name="curLbl" label.
OR
Might be there is a more elegant solution to show suggestion results without pushing all the other elements down?(Read:overlay other elements on UI)
Image to visualise UI
I am trying to get the selected item of a listview by clicking or double clicking on it.
<StackPanel x:Name="doelenContentPanel" Orientation="Horizontal" Width="Auto" Grid.Column="0">
<Grid Margin="0,0,50,0" Width="Auto">
<TextBlock Name="textBlock" HorizontalAlignment="Left" Height="21" Margin="10,61,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="248" Text="PickerUse"/>
<ListView Name="listView" HorizontalAlignment="Left" Height="Auto" Width="Auto" VerticalAlignment="Top">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="200" />
</GridView>
</ListView.View>
</ListView>
</Grid>
</StackPanel>
for buttons I can just use the method Add_click ($window.rbImport.Add_Click({ ) on an item in WPF but this does not exist on listview. How can I set this programmatically without changing the WPF itself?
I tried $window.listview but when I choose a mouse method it is telling me that this method does not exist:
Method invocation failed because [System.Windows.Controls.ListView] does not contain a method named 'MouseDoubleClicked'
Thanks
Solution was:
$WPFListView.Add_MouseDoubleClick({Write-Host "Double clicked"})
I have one list as RoomGroupList and another as RooList,One Room Group have multiple Roos in it, like
RoomGroup 1 => Room-1
Room-2
Room-3
I have bound RoomGroupList to ListView and RoomGroupControll is Generating From it as,
<ListView x:Name="lstRoomGroupList" SelectionMode="Single" ItemsSource="{Binding roomGroupList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" SelectedItem="{Binding evokoRoomGroup,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
<ListView.ItemTemplate>
<DataTemplate>
**<UserConrols:RoomGroupControl/>**
</DataTemplate>
</ListView.ItemTemplate
Now RoomGroupControl has one ListView to Listout No.ofRooms in it as,
<ListView x:Name="lstRoomList" Grid.Row="3" ItemsSource="{Binding GetroomList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding DataContext.EvokoRoom,ElementName=tbDashBoard,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#F3F3F5"
BorderBrush="LightGray" BorderThickness="0"
Margin="0,0,0,0" Height="Auto" MaxHeight="200" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
**<UserConrols:RoomControl/>**
</DataTemplate>
</ListView.ItemTemplate>
what I want is,when I click on any button from ListElements at that time it's corresponding ListItem(row) should be selected so that I have added EventSetter using Resource on RoomGroupList as
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="PreviewGotKeyboardFocus" Handler="SelectCurrentItem"/>
</Style>
</ListView.Resources>
It's working properly for RoomGroupList I'm able to select Different Groups but Problem is I Can't select Rooms From RoomGroup which I have selected.
If anyone knows how to manage this, can also provide me Links and Suggestions,Thanks.
I've been trying to use Attached Behaviors in a simple Windows Store App using the MVVM Light framework. Since we can't use System.Windows.Interactivity, as in Windows Phone, I've been using both Windows.UI.Interactivity and WinRtBehaviors lybraries. They work well but the problem is that I can't declare an attached behavior inside a data template.
What I really want is to attach a command to any item in a GridView, so that I can pass the item id as the parameter. Since that attached behavior doesen't work, the only solution I found consists on using the "SelectionChanged" event of the GridView and pass the SelectedItem as the parameter to a property in the ViewModel:
<GridView Grid.Row="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Padding="116,136,116,46"
ItemsSource="{Binding GeoTopArtists.topartists.artist}"
SelectionMode="Single"
SelectedItem="{Binding SelectedArtist, Mode=TwoWay}"
IsSwipeEnabled="False"
IsItemClickEnabled="False">
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="SelectionChanged" Command="SelectArtistCommand" CommandParameter="{Binding SelectedArtist.mbid}"/>
</WinRtBehaviors:Interaction.Behaviors>
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding image[4].text}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding url}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
It would be very nice doing something like that (where there's no need to have a SelectedArtist property in the ViewModel)
<GridView Grid.Row="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Padding="116,136,116,46"
ItemsSource="{Binding GeoTopArtists.topartists.artist}"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding image[4].text}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding url}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="Tapped" Command="SelectArtistCommand" CommandParameter="{Binding Artist.mbid}"/>
</WinRtBehaviors:Interaction.Behaviors>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This link may help you out. The dependency property is defined and hooked to a command in view model. So whenever there is interaction in view, the selected item can be sent as commanding parameter which is clearly demonstrated in this video.
I have a TabControl generating some tab items following the MVVM pattern using WPF.
The TabControl ItemTemplate i.e. for each of the tab items that is generated, I have a combobox that should show some data from a different list. This list is not the same as the bound object of the Tab Item itself.
For eg: If a tabitem is bound to a address object the combobox should show data from a state list and show the state present in the address object as the selected item.
The Combo box is having only one item as a datagrid which is bound to the state list
The problem is that all data is being shown in all sections but the combo box simply wouldnt show the data. Surprisingly, the Combobox when taken out of the TabControl DataTemplate works fine....
Below is the code both outside and inside the tabcontrol. Some suggestions please !!!
------This one is outside the Tabcontrol and works perfectly--------------
<ComboBox SelectedValue="{Binding SelectedState}" HorizontalAlignment="Left" VerticalAlignment="Center" IsEditable="True" Margin="50,55,0,61" Height="27" Width="193">
<ComboBoxItem TextSearch.Text="{Binding SelectedState}">
<ContentControl>
<DataGrid SelectedIndex="{Binding StateSelectedIndex}" ItemsSource="{Binding StateData}" AutoGenerateColumns="False" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" cal:Message.Attach="[Event SelectionChanged] = [Action SelectionChanged]">
<DataGrid.Columns>
<DataGridTextColumn Header="StateName" Binding="{Binding StateName}" />
</DataGrid.Columns>
</DataGrid>
</ContentControl>
</ComboBoxItem>
</ComboBox>
----This one is inside the TabControl ---------
<TabControl Margin="3,3,0,0" HorizontalAlignment="Left" Width="752" Height="255" VerticalAlignment="Top" Grid.ColumnSpan="2" Grid.Row="1" ItemsSource="{Binding Addresses}" SelectedIndex="{Binding WhichAddressTab}" >
<TabControl.ItemContainerStyle>
...................................
</TabControl.ItemContainerStyle>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl>
..........................
<ComboBox SelectedValue="{Binding SelectedState}" HorizontalAlignment="Left" VerticalAlignment="Center" IsEditable="True" Margin="108,3,0,1" Grid.ColumnSpan="3" Grid.Row="1" Width="147">
<ComboBoxItem TextSearch.Text="{Binding SelectedState}" >
<ContentControl>
<DataGrid SelectedIndex="{Binding StateSelectedIndex}" ItemsSource="{DynamicResource StateData}" AutoGenerateColumns="False" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" cal:Message.Attach="[Event SelectionChanged] = [Action SelectionChanged]">
<DataGrid.Columns>
<DataGridTextColumn Header="StateName" Binding="{Binding StateName}" />
</DataGrid.Columns>
</DataGrid>
</ContentControl>
</ComboBoxItem>
</ComboBox>
...........................
</Grid>
</ContentControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
I have tried searching and have understood the problem is with the databinding within a datatemplate, but have been unable to achieve the desired result.
Yes, the problem is with your binding. The DataContext inside of the DataTemplate is for a single element (from the collection bound to the ItemsSource). Meaning that you can't access properties that are directly on the ViewModel itself.
To work around this, you can name the TabControl for example, and convert your bindings inside of the DataTemplate to use ElementName bindings. Another solution, if you have your ViewModel defined as a Static Resource, is to bind directly to the resource, and use the Path to specify the property to which you want to bind.
Hope this helps :)