Wait for binding update, then lose focus on ListViewItem - xaml

So I have a ListView. It has a ItemSource and a SelectedItem.
The SelectedItem has a bool property that toggles the visibility of the Button and TextBox.
When you press in the ListViewItem I want to be able to toggle the visibility on and off, even if I just spam the row.
The solution is partly working, except that SelectedItem is only fired when the Item don't have focus. So when I have toggled one time, I have to do it to another item to toggle the first again.
I have thought about code-behind, add something to the GotFocus-method, but can't think of what I have to do there.
Suggestions?
XAML:
<ListView ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.IsVerticalRailEnabled="False"
Background="White"
ItemsSource="{Binding Activities}"
SelectedItem="{Binding SelectedActivity, Mode=TwoWay}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
SelectionCheckMarkVisualEnabled="True"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
PlaceholderBackground="White"
PointerOverBackground="LightGray"
PointerOverForeground="DarkGray"
SelectedBackground="White"
SelectedForeground="DimGray"
SelectedPointerOverBackground="White"
PressedBackground="White"
SelectedPressedBackground="White"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.Header>
<StackPanel Background="#8c8c8c"
Orientation="Horizontal"
FlowDirection="LeftToRight"
Padding="8,8,8,8">
<TextBlock Text="{Binding Title}"
FontSize="18"
Foreground="White"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,10,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,2,6,2">
<TextBlock FontSize="20"
VerticalAlignment="Center"
Foreground="DimGray"
TextWrapping="WrapWholeWords"
Text="{Binding Activity.Description}"/>
<TextBlock FontSize="15"
VerticalAlignment="Center"
Foreground="DimGray"
Text="{Binding Activity.Condition}"/>
</StackPanel>
<Button Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
Margin="6"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
Command="{Binding ToggleMeasureCompletionCommand}">
<Grid>
<TextBlock FontFamily="Segoe MDL2 Assets"
FontSize="35"
Foreground="DimGray"
Text=""
Margin="8"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Visibility="{Binding IsCompleted, Converter={StaticResource InverseBooleanToVisibilityConverter}}"/>
<TextBlock FontFamily="Segoe MDL2 Assets"
FontSize="35"
Foreground="DimGray"
Text=""
Margin="8"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Visibility="{Binding IsCompleted, Converter={StaticResource BoolToVis}}"/>
</Grid>
</Button>
<Grid Visibility="{Binding IsInFocus, Converter={StaticResource BoolToVis}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" PlaceholderText="Kommentar til tiltak" HorizontalAlignment="Stretch" Padding="5" Margin="0,0,10,0"/>
<Button Grid.Column="1" Content="Flag" HorizontalAlignment="Right" Foreground="White" Padding="10,5,10,5">
<Button.Background>
<SolidColorBrush Color="Red" Opacity="0.5" />
</Button.Background>
</Button>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
C# - property:
public SelectedItemViewModel SelectedActivity
{
get { return _selectedActivity; }
set
{
_selectedActivity = value;
SelectedActivity.IsInFocus = !SelectedActivity.IsInFocus;
OnPropertyChanged();
}
}

Write this code SelectedActivity.IsInFocus = !SelectedActivity.IsInFocus inside ItemClick event of listview.
You can write inside Taped event also

Related

Wp 8.1 xaml issue

I have TemplatedControl defined as:
<Style TargetType="controls:HeaderedContentControl">
<Setter Property="HintAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:HeaderedContentControl">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="Gray">
<TextBlock Text="{TemplateBinding Header}"
FontSize="25"
Foreground="White"
TextWrapping="Wrap"
Margin="0,10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ScrollViewer Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource strConv}}"
Text="{TemplateBinding Hint}"
TextAlignment="{TemplateBinding HintAlignment}"
TextWrapping="Wrap"
Foreground="Gray"
FontSize="17"
Margin="10"/>
<ContentPresenter Content="{TemplateBinding Content}"
Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sometimes after navigation to the page with this control I see
this
instead of
this
I think this occurs because of BottomAppBar on the page. How can I get round this issue?
Layout where this control is used:
<controls:HeaderedContentControl Header="Регистрация">
<StackPanel Margin="10,40">
<TextBlock Text="Номер телефона:"
FontSize="20"/>
<Grid Margin="0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="8"
Margin="10,0"
VerticalAlignment="Center"
FontSize="20"/>
<controls:PhoneTextBox Value="{Binding PhoneNumber, Mode=TwoWay}"
AddContactVisibility="Collapsed"
Margin="0"
Grid.Column="1"/>
</Grid>
<TextBlock Text="Номер вводится без 8-ки. Пример: (XXX)XXX-XX-XX"
FontSize="15"
Foreground="Gray"
TextWrapping="WrapWholeWords"/>
</StackPanel>
</controls:HeaderedContentControl>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Далее"
Icon="Accept"
Command="{Binding RegisterCommand}"/>
</CommandBar>
</Page.BottomAppBar>

UWP ListView not data

I have a ListView defined like this:
<ListView x:Name="phonesListView"
Grid.Row="5"
Background="Black"
IsItemClickEnabled="True"
Foreground="Gray" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="20, 0, 20, 0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="auto" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ComboBox
Grid.Column="0"
VerticalAlignment="Center"
Background="Black"
Foreground="White" >
<ComboBoxItem Content="Home" IsSelected="True"/>
<ComboBoxItem Content="Work"/>
<ComboBoxItem Content="Office"/>
<ComboBoxItem Content="Fax"/>
<ComboBoxItem Content="School"/>
</ComboBox>
<Button
Grid.Column="1"
Height="30"
Width="30"
Foreground="Black"
Margin="0, 5, 0, 5"
HorizontalAlignment="Center" Click="RemovePhone">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/appbar.close.png" />
</Button.Background>
</Button>
</Grid>
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number}"
InputScope="TelephoneNumber" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In code i have attribute:
ObservableCollection<Phone> phones = new ObservableCollection<Phone>();
Everything works fine, I can add and delete items in list view by either
phones.Add or phones.Remove
The problem is for when I'm leaving a page or Save button is pressed the count of this collections is exactly it is supposed to be but there are no data i have filled in input field. Could you help me with that? Thanks.
If you want that the edited data in your ListView flows back to the items so you can save the edits, you'll have to use 2-way binding. When the control (in the sample below your TextBox) loses focus, the value of Text property gets stored back into the bound field (in your sample Number).
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number, Mode=TwoWay}"
InputScope="TelephoneNumber" />
For more details about binding, read the MSDN article.

Drop Event is Not Firing in UWP XAML(Windows 10)

I am developing an App For WIndows 10 and I want to Implement the Drag and Drop Frature within Two List. but the Drop Event is Not Firing in Windows 10 App..
Previously it is Woring for Windows 8.1..
Following is My Code:
<ListView Grid.Row="1" x:Name="TasksList" SelectionMode="None" HorizontalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Hidden" IsItemClickEnabled="True"
VerticalAlignment="Stretch"
ItemsSource="{Binding Tasks}" ScrollViewer.VerticalScrollMode="Enabled"
CanReorderItems="True" ShowsScrollingPlaceholders="False"
DragItemsStarting="GridViewDragItemsStarting" AllowDrop="True" IsSwipeEnabled="False"
Drop="GridViewDrop" DragEnter="TasksList_DragEnter" CanDragItems="True"
ItemContainerStyle="{StaticResource ClientListViewItemStyle}" >
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="{StaticResource MydesqBorderBrush}" Padding="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Width="80" Height="60" Background="{Binding DueDateIndicatorColor,Converter={StaticResource HexToSolidColorBrushConverter}}" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="ImgClient" Source="{Binding Client.ClientPictureUrl,Converter={StaticResource ServerUrlConverter}}" Stretch="Fill" Visibility="{Binding Source, Converter={StaticResource NullToInvisibilityConverter}, ElementName=ImgClient}" Width="80" Height="60"/>
<Image x:Name="ImgAccount" Source="{Binding ImageUrl}" Width="35" Height="35" Visibility="{Binding Source, Converter={StaticResource NullToInvisibilityConverter}, ElementName=ImgAccount}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Grid Grid.Column="1" Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding TaskTitle}" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="20" Foreground="{Binding TitleColor, Converter={StaticResource HexToSolidColorBrushConverter}}"/>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Image Width="20" Height="20" VerticalAlignment="Center" Source="/Assets/Images/user_gray.png" Margin="0,0,10,0"/>
<TextBlock Text="{Binding TaskType}" FontSize="16" VerticalAlignment="Center" Foreground="{Binding SubTitleColor, Converter={StaticResource HexToSolidColorBrushConverter}}" Margin="5,0,0,0"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<Image Width="20" Height="20" VerticalAlignment="Center" Source="/Assets/Images/calendar_gray.png" Margin="0,0,10,0"/>
<TextBlock Text="{Binding DueDate, ConverterParameter=\{0:dd.MM.yyyy\}, Converter={StaticResource DateToStringConverter}}" FontSize="16" VerticalAlignment="Center" Foreground="{Binding SubTitleColor, Converter={StaticResource HexToSolidColorBrushConverter}}" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="ItemClick">
<behaviors:NavigateWithEventArgsToPageAction
TargetPage="Mydesq.Client.UWP.Views.AddTaskPage"
EventArgsParameterPath="ClickedItem" />
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="Drop">
<Core:InvokeCommandAction Command="{Binding DropTaskCommand}" CommandParameter="{Binding ElementName=TasksList,Path=SelectedItem}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
Make sure you set the AcceptedOperation property in the DragEnter event of the ListView. E.g. like this:
private void TasksList_DragEnter(object sender, DragEventArgs e)
{
e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
}
I had similar issue with Grid in MainPage
AllowDrop="True"
fixed that even without DragEnter event.
(I know you already have this property (my answer is for others...))

2 DataTemplates within each other, Command not found

My ICommand is not firing when i touch my button...
I have a DataTemplate within a DataTemplate... does DataContext still refer to the entire page or is it that DataContext refers to the previous DataTemplate and that's why it cannot find my view model's ICommand?
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<Border BorderThickness="0 0 0 2" BorderBrush="{StaticResource xLightGray}" Margin="0,0,0,10" Padding="0,0,0,10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Transparent">
<Border Background="White" BorderThickness="0" Width="40" Height="40" HorizontalAlignment="Left">
<Image Source="{Binding image.thumbnail_link}" Width="40" Height="40"></Image>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding name}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Padding="10,0,0,0" />
</StackPanel>
</Grid>
</Border>
<phone:LongListSelector x:Name="OrganisationItemList"
Background="Transparent"
ItemsSource="{Binding spaces}"
LayoutMode="List"
VerticalContentAlignment="Stretch">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Background="Red" Style="{StaticResource xTransparentButton}" Command="{Binding Path=DataContext.LoadSpaceCommand, ElementName=SpaceList}" CommandParameter="{Binding}" Padding="0,0,0,5" Margin="0" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<TextBlock Padding="0,0,0,0" Text="{Binding name}" HorizontalAlignment="Left" FontSize="{StaticResource xFontSize}" />
</StackPanel>
</Button>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
Found the answer, you must set ElementName in the binding to the parent ListBox:
Command="{Binding Path=DataContext.LoadSpaceCommand, ElementName=OrganisationList}"

Scrollviewer is not working

I am not able to make the scrollviewer working! The list is not scrollable. Maybe you can help me :)
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Margin="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top">
<ListBox x:Name="KommentareListView" ItemsSource="{Binding}" Foreground="White" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#FF0083FF" Width="10" />
<StackPanel Margin="10,5,10,5" Grid.Column="1">
<TextBlock Text="{Binding Kommentar}"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" Foreground="Black"/>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding Author}"
FontSize="12" Margin="0,0,0,0" Foreground="Black"/>
<TextBlock Text="{Binding Date}"
FontSize="12" Margin="30,0,0,0" Foreground="Black"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="mehrKommentareLaden" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0" Height="45" Visibility="Collapsed" Content="mehr Kommentare laden" Click="mehrKommentareLaden_Click" />
</StackPanel>
</ScrollViewer>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="1">
<StackPanel x:Name="AnmeldenPanel" VerticalAlignment="Bottom" Width="456" Visibility="Collapsed">
<Button x:Name="AnmeldenButton" Content="Anmelden" VerticalAlignment="Center" BorderBrush="Black" Foreground="Black" Margin="0" Click="AnmeldenButton_Click"/>
<TextBlock TextWrapping="Wrap" Text="Du musst dich anmelden, um Kommentare zu verfassen." Margin="15,0,0,0"/>
</StackPanel>
<toolkit:PhoneTextBox x:Name="KommentarBox" Hint="Dein Kommentar..." LengthIndicatorVisible="True" LengthIndicatorThreshold="10" DisplayedMaxLength="240" TextWrapping="Wrap" Background="#BFB2B2B2" BorderBrush="#BFFFFFFF" Foreground="#91000000" SelectionBackground="#FF0083FF" SelectionForeground="White" Style="{StaticResource PhoneTextBoxWhiteBackground}" Height="74" Width="456"/>
</StackPanel>
<!--<Controls:WatermarkTextBox x:Name="KommentarTextBox" Margin="0,0,100,20" TextWrapping="Wrap" Watermark="Dein Kommentar...." Height="30" VerticalAlignment="Center" FontFamily="Calibri" FontSize="17.333" BorderBrush="#CC000000"/>-->
</Grid>
Try making the List height to auto and everything else to auto which is in between List and ScrollView like you are having StackPanel.