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.
Related
In my WPF application I have ListBox which contains a collection of items. One item can be added when a button is clicked and it is selected in the opened dialogue. As soon as a item is selected the dialogue closes and the item's image and name should be displayed in my ListBox. Unfortunately the Listbox does not update and nothing changes.
Usercontrol with Listbox:
<ListBox ItemsSource="{Binding BlButtonCollection, UpdateSourceTrigger=PropertyChanged}" VerticalContentAlignment="Stretch" SelectedItem="{Binding SelectedSticker}"
HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle}">
<ListBox.Resources>
<viewmodels1:BindingProxy x:Key="ProxyElement" Data="{Binding}" />
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" Rows="10"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<Grid x:Name="f">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="btnSelectArticle" Background="Transparent" Grid.RowSpan="2" BorderThickness="0"
Command="{Binding DataContext.ButtonClicked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBox}}}"/>
<Image Height="1.5cm" HorizontalAlignment="Center" Source="{Binding ItemImage.ImageUrl, Converter={StaticResource ImageFormatConverter}}"/>
<TextBlock Text="{Binding ItemName}" Width="4cm" Height="0.8cm" TextWrapping="Wrap" Grid.Row="1" HorizontalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Controls with ListBoxes in main window:
<formats:OneXTwo x:Name="oneXTwo" BlButtonCollection="{Binding BlButtons_2}" IsBlVisible="Visible" Visibility="{Binding Are2StickersVisible}"
ButtonClicked="{Binding BlStickerButtonClickedCommand}"/>
<formats:ThreeXEight x:Name="threeXEight" BlButtonCollection="{Binding BlButtons_24}" IsBlVisible="Visible" Visibility="{Binding Are24StickersVisible}"
ButtonClicked="{Binding BlStickerButtonClickedCommand}"/>
<formats:FourXTen x:Name="fourXTen" BlButtonCollection="{Binding BlButtons_40, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" IsBlVisible="Visible" Visibility="{Binding Are40StickersVisible}"
ButtonClicked="{Binding BlStickerButtonClickedCommand}" SelectedSticker="{Binding SelectedBlSticker, Mode=TwoWay}" />
I should mention that I have three different formats and each format is a own user-control. Therfore, they are displayed in a shell-view and based on a ComboBox selection one format is displayed. If I am running the application, select a image nothing happens, but if I change the bound value of the textblock in the list view and switch it back to 'Itemname' the Image and Name are displayed.
Have you set the DataContext to a specific ViewModel?
ObservableCollection can only ensure the add/remove operation for items that can be updated to the UI. If you want to the item property to notify the UI, you should override the setter of the property and implement INotifyPropertyChanged.
I have a ListBox in my WPF MVVM app using the following code:
<GroupBox Grid.Column="0" Margin="0,0,0,-58">
<DockPanel>
<TextBlock DockPanel.Dock="Top"
HorizontalAlignment="Center"
Margin="0,0,0,8"
FontWeight="Bold"
Text="{x:Static p:Resources.AvaliableLEDsLabel}" />
<ListBox Name="AvailableLEDsListbox" SelectionMode="Extended"
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
dd:DragDrop.DropHandler="{Binding}"
ItemTemplate="{StaticResource DataTemplateListBoxItem}"
ItemsSource="{Binding AvailableLeds}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
>
<ListBox.GroupStyle>
<StaticResource ResourceKey="StyleListBoxGroup" />
</ListBox.GroupStyle>
</ListBox>
</DockPanel>
</GroupBox>
This displays grouped lists of devices, with LEDs under them. The DataTemplate is the following:
<GroupStyle x:Key="StyleListBoxGroup">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Command="{Binding HideGroupCommand}">X</Button>
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Left"
FontWeight="Bold"
Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<DataTemplate x:Key="DataTemplateListBoxItem">
<TextBlock x:Name="LedId" Text="{Binding LedId}"/>
</DataTemplate>
I would like to make the X button in the header hooked up to the HideGroupCommand toggle the hiding of all the items under that particular header. How would I go about doing this? Thanks in advance.
You have few options.
First one :
You would need to have a property in your view model something like 'ListBoxVisibility' then u would bind that property to your UI. In command text u just changed visibility property of that property in view model- so u have it reflected on UI. This visibility property can be of type 'bool' , or 'Visibility' or whatever. Only if it's type of Visibility u don't need converter when binding.
NOTE : Some people use it - even though it kinda goes out of general principel of MVVM patter. But sometimes u have to do it.
Second
If wanna stick to MVVM , then u need to fully separate your UI from your viewmodel. Create click event and change visibility.
I am bit new to WPF (XAML) and I have an ItemsControl bound to a list with a MyCollections property . Now my requirement is initially to show only 1st element from the list and having a Show More button option at the end of list. A click on it would show the rest of the items from the collection.
This is my XAML so far, displaying the whole collection:
<ItemsControl x:Name="ContentRoot" ItemsSource="{Binding MyCollections}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<grid>
<TextBox Text="{Binding }" />
<TextBox Text="{Binding }" />
</grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You can have both a ContentControl (which displays the first item of the collection) and an ItemsControl (which displays the whole collection) displayed only when a ToggleButton is checked for example.
<StackPanel>
<StackPanel.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate DataType="{x:Type local:MyViewModel}">
<Grid>
<TextBox Text="{Binding}" />
</Grid>
</DataTemplate>
</StackPanel.Resources>
<ContentControl Content="{Binding MyCollection[0]}"/>
<ToggleButton x:Name="toggle" Content="Show more"/>
<ItemsControl ItemsSource="{Binding MyCollection}" Visibility="{Binding ElementName=toggle, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</StackPanel>
You can then adapt this to fit your exact needs.
I am facing a trouble in getting item's index in Listview. I have a child element inside data template like the following:
<ListView x:Name="ptype_gw" Width="300" HorizontalAlignment="Left" ItemsSource="{Binding PropertyTypes}" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding title}" Style="{ThemeResource menu_heading_green}" Grid.Row="0" />
<GridView Grid.Row="1" ItemsSource="{Binding childs}" >
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<RadioButton Name="PropertyTypeRadio" Content="{Binding title}" Tag="{Binding}" GroupName="Types" Checked="RadioButton_Checked" Background="White" Foreground="Black" BorderBrush="Black" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now i Need to get the index of selected item whenever radio button is checked. I have tried the following code:
var item = (sender as FrameworkElement).DataContext;
int index = ptype_gw.Items.IndexOf(item);
But it didn't helped me.
That’s very simple.
Bind the SelectedItem of list to a property in view model. Say SelectedItem. When user selects an item, the SelectedItem property will hold the details of current selected item.
Now handle the radio button checked or unchecked event as per your requirement. When the event occurs, check the SelectedItem property.
I am talking about MVVM case.
If you are writing code in your xaml.cs itself, then get the selected property of listbox directly like this in the radio button checked event.
ListBoxName.SelectedItem
ListBoxName.SelectedIndex
I have some problems binding a ListBox to the elements of a collection in a collection.. Let me explain:
I have a collection, ObservableCollection<Test> named testsCollection. Every test contains an ObservableCollection<LogEvent> named LogEvents. Every LogEvent has a Message that I need to display in the ListBox.
I need to display every "Message" in every "LogEvent" in every "Test". It has to be displayed in a flat list so I'm using a ListBox.
Here's a summary of what I tried:
DataContext = testCollection; // testCollection is an ObservableCollection<Test>
The I put this in the XAML:
<ListBox ItemsSource="{Binding LogEvents}" ItemTemplate="{StaticResource stepItemTemplate}">
Finally, here's the ItemTemplate, stepItemTemplate:
<DataTemplate x:Key="stepItemTemplate">
<TextBlock Text="{Binding Message}"></TextBlock>
</DataTemplate>
This "works" but it only displays the Messages in the LogEvents of the first Test. But I need to display every Messages of every LogEvent of every Test.. And I don't know what to try anymore :(
You should Usser ItemsControl when you want to bind a scenario like this
<ListBox ItemsSource="{Binding testsCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Message}" FontSize="20" />
<ItemsControl ItemsSource="{Binding LogEvents}" Margin="0 20 0 0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Blue" BorderThickness="2">
<TextBlock Text="{Binding Message}" FontSize="20" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>