i have a longlistselector and use contextmenu. I have problem when use NavigationService.
For each list item there is a context menu to delete or edit the item and that appears to work okay for pre-existing lists of items.
However, if I add a new person, add a new item to that person, edit it, then add another item, when I try to edit the second item, the first item is selected instead.
IS A BUG?
My Xaml code looks like this:
<DataTemplate x:Key="LongListSelectorItemTemplate">
<StackPanel Orientation="Horizontal" Margin="4,4">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu cal:Action.TargetWithoutContext="{Binding DataContext, ElementName=LayoutRoot}">
<toolkit:MenuItem Header="Edit" cal:Message.Attach="[Event Tap] = [Action ContextMenuEdit_EventTap($datacontext)]" />
<toolkit:MenuItem Header="Delete" cal:Message.Attach="[Event Tap] = [Action ContextMenuDelete_EventTap($datacontext)]" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Name2}" />
</StackPanel>
</DataTemplate>
I'm not sure if this is the solution for your problem, but i had a same sort of problem and it works for me.
Add a name to the phoneApplicationPage (top of the xaml)
<phone:PhoneApplicationPage
......
Your settings
......
x:Name="Page">
And change this code:
<toolkit:ContextMenu cal:Action.TargetWithoutContext="{Binding DataContext, ElementName=LayoutRoot}">
Into this:
<toolkit:ContextMenu cal:Action.TargetWithoutContext="{Binding ElementName=Page, Path=DataContext}">
Related
I have an app where I save the user's contacts in a local Database, then bind this contacts in a LongListSelector using ObservableCollection to update the UI (when a new item is add or deleted).
But I'm having a strange behavior when the ObservableCollection is changed...
The item is add to the UI correctly, but after this, when I scroll fast, a blank space appears in the middle of the list.
Then I found out that, apparently, the list is cutting some items...
I was testing with a list of 140 items (strings), having at least one item starting with each alphabetic letter.
When this problem happens, I saw that after items with C letter, started the items with P letters (D to O disappeared!).
Does anybody can tell me what is happening?
I bind the items on LongListSelector this way:
XAML:
<Grid x:Name="ContentPanelContatos" Grid.Row="1" Margin="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid x:Name="gridContatos" Grid.Row="1" Margin="12,2,12,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0,12" >
<TextBox x:Name="tbxSearch" VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed" TextChanged="TbxSearch_TextChanged" LostFocus="TbxSearch_LostFocus" Style="{StaticResource TextBoxStyle}" />
</Grid>
<phone:LongListSelector Grid.Row="1" x:Name="llsContacts" ItemsSource="{Binding}" SelectionChanged="llsContacts_SelectionChanged" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem local:TiltEffect.IsTiltEnabled="true">
<Grid Margin="0,0,0,10" >
<TextBlock Text="{Binding COLUMN_NAME, Mode=TwoWay}" FontFamily="Segoe WP" FontSize="28" Margin="77,0,0,0" />
<TextBlock Text="{Binding Path=COLUMN_NUMBER, Mode=TwoWay}" FontFamily="Segoe WP Light" FontSize="17" Margin="77,33,0,0"/>
</Grid>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
<!-- more 2 grids with contents -->
</Grid>
CS:
public ObservableCollection list;
public Main()
{
InitializeComponent();
list = new ObservableCollection<MyClass>(GetDataFromDatabase);
llsContacts.DataContext = list;
}
When I insert or remove something on DataBase, I alter on the list too:
list.Add(newData);
Am I doing something worng??
Reading this article: Frame rate counters in Windows Phone, I noticed that when this problem happens, some of the numbers that are on the side of the screen when debugging, stops changing...
They stops like this:
User Interface Thread FPS: 000
Texture Memory Usage: 007181
Surface Counter: 050
Intermediate Texture Counter: 002
Does this numbers means something?
I have a windows 8.1 store app and I can't figure out how to get the datacontext to access my viewmodel for a relaycommand. The xaml works all the way up to the flyout and then it fails. So the button with content "buttonWorks" successfully gets the binding from the rootGrid element and calls the command on the viewmodel. But the button right below in the flyout does not. Why?
To make an example of the binding problem, create a new Store App with the Split App template. Then add a flyout to the SplitPage and bind a textbox text to the itemtitle element. The binding will not populate the flyout textbox. The code snippet looks like this:
<Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
<Button Content="Update">
<Button.Flyout>
<Flyout>
<StackPanel>
<StackPanel Margin="5" Orientation="Vertical" >
<TextBlock Text="Item Title" VerticalAlignment="Bottom"/>
<TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}" Width="200" />
</StackPanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
I can get the command binding to work using Dani's answer and setting the datacontext on the button hosting the flyout like this, but I can't bind the textboxes as seen in the template example above
<Button Content="Update" HorizontalAlignment="Center" DataContext="{Binding ViewModel, ElementName=pageRoot}" >
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock Text="Item Title" VerticalAlignment="Bottom"/>
<TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}" Width="200" />
<Button x:Name="buttonTest" Margin="5" Height="40" Content="Test" HorizontalAlignment="Center" Command="{Binding UpdateMatchDataCommand}"/>
Original Code Example Problem:
<Grid Name="rootGrid" Tag="{Binding}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
....
<ScrollViewer
x:Name="itemDetail"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
Padding="60,0,66,0"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="0,0,10,0" Width="180" Height="180">
<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
<Button Content="Update" HorizontalAlignment="Center" >
<Button.Flyout>
<Flyout>
<Button Name="buttonFail" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
....
If you work with ViewModels I would suggest that you change the DataContext to your page.
<Page
x:Name="rootPage"
DataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"
...
And CodeBehind:
private readonly ViewModel _viewModel = new ViewModel();
public ViewModel ViewModel
{
get { return _viewModel; }
}
Now you can change your commands to:
<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand}"/>
ElementName is now only necessary if you bind to a property in code behind.
It ends up that I could never solve the problem using the binding that the template provides. It appears to me that changing the datacontext of a single element in the flyout is not allowed. So, the way I got around it is to create a selected item in the viewmodel and changed the template code to bind to the selected item on view model. Then bind all elements including the command to the same datacontext for the entire form.
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="-10,-10,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Matches}"
SelectedItem="{Binding SelectedMatch, Mode=TwoWay}"
IsSwipeEnabled="False">
<ListView.ItemTemplate>
<DataTemplate>
Now the binding works for all fields including the template.
He everybody!
What I want to do is to open a flyout with list of items (binded to a collection from a ViewModel) and then, when a user chooses any item in the list, the flyout should be hidden. To achieve this I'm using a behavior which hides the flyout. The problem is that the behavior doesn't work when I'm tapping on the item that is already chosen (on currently selected item).
I have the following code.
<Button.Flyout>
<Flyout Placement="Full">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding SelectedCategory}"
ComparisonCondition="NotEqual">
<controls:CloseFlyoutAction />
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<ListView ItemsSource="{Binding Source={StaticResource GroupedCategories}}"
SelectedItem="{Binding SelectedCategory, Mode=TwoWay}">
<ListView.GroupStyle>
<GroupStyle>
//... skiped for brevity
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<ContentControl Foreground="{Binding IsSelected, Converter={StaticResource ForegroundConverter}}"
Content="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</Button.Flyout>
create Pivot control with dynamic pivot items, within the pivot datatemplate have to show Items control that too will have data template..like below
<phone:Pivot x:Name="chatPivot" Margin="0 2 0 76" ItemsSource="{Binding Contacts}" SelectionChanged="chatPivot_SelectionChanged"> <phone:Pivot.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="chatScroll" Margin="0,0,0,72" VerticalScrollBarVisibility="Auto">
<ItemsControl Margin="0" x:Name="chats" Tap="chats_Tap_1" ItemsSource="{Binding Messages}"
ItemTemplate="{StaticResource imgItemTemplate}" ItemsPanel="{StaticResource imgItemPanel}">
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Here is my dataTemplate.
<phone:PhoneApplicationPage.Resources>
<ItemsPanelTemplate x:Key="imgItemPanel">
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
<DataTemplate x:Key="imgItemTemplate" >
<chatbubble:ChatBubbleControl x:Name="ChatBubble" Hold="ChatBubbleControl_Hold_1" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I actually do not know the design of your "ChatbubbleControl" usercontrol but I found one issue why values are not getting bound.
<phone:PhoneApplicationPage.Resources>
<ItemsPanelTemplate x:Key="imgItemPanel">
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
<DataTemplate x:Key="imgItemTemplate" >
<chatbubble:ChatBubbleControl x:Name="ChatBubble" xyz="{Binding}" Hold="ChatBubbleControl_Hold_1" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
You are binding value to ItemsControl but you are not binding any value to actual control (here, chatbubblecontrol) that is displaying the value on screen.
The solution is the you need to create a property to your usercontrol e.g.: Here, I made a test property named "xyz". and then try to bind the values to it.
Hope this will help you conceptually.
I have a LongListSelector like that
<phone:LongListSelector Name="ListRecentFiles"
LayoutMode="Grid"
ItemsSource="{Binding}"
GridCellSize="140,140"
SelectionChanged="ListRecentFiles_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Background="Red" Margin="0,0,5,5">
<TextBlock Text="{Binding NoteTitle}" Style="{Binding PhoneTextNormalStyle}" />
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem x:Name="Delete" Header="Delete" Click="DeleteNote_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
this is DataContext: public static ObservableCollection<Note> NoteItems;
And i try to delete an item from LongListSelector
private void DeleteNote_Click(object sender, RoutedEventArgs e)
{
Note selectedNote = (sender as MenuItem).DataContext as Note;
ListRecentFiles.ItemsSource.Remove(item);
NoteItems.Remove(selectedNote);
}
It's not work except i navigate to a other XAML page and return
I have visited this page but can't fix link
Without seeing more of the code, it's hard to be sure what's going wrong. But if you are setting
ListRecentFiles.DataContext = NoteItems;
that is incorrect. You want to set
ListRecentFiles.ItemsSource = NoteItems;
The XAML declaration:
ItemSource="{Binding}"
Could do that (depending on the rest of the code). Once .ItemsSource is set correctly, then the line:
NoteItems.Remove(selectedNote);
Should succeed in removing the visual item from the LongListSelector. In any case, you should not do the line:
ListRecentFiles.ItemsSource.Remove(item);
That would do the wrong thing when the list gets so big that it doesn't all fit in memory at once.