How to pass CommandParameter on holed item? - windows-phone-8

How to pass CommandParameter on holed item?
my xaml code
<ListView Grid.Row="1" Name="ProfilesListView" SelectedItem="{Binding SelectedUser,Mode=TwoWay}" ItemsSource="{Binding Path=ViewAllProfile,Mode=TwoWay}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center">
</ItemsWrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<I:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Holding">
<core:InvokeCommandAction Command="{Binding Path=HoldingCommand}" CommandParameter="{Binding ElementName=ProfilesListView,Path=SelectedItem}" ></core:InvokeCommandAction>
</core:EventTriggerBehavior>
</I:Interaction.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0,0,0">
<Image Margin="10" Source="{Binding ImageURL}" Width="150" Height="150" >
</Image>
<TextBlock x:Name="userName" Text="{Binding MenuName}" Foreground="White" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
my viewmodel is .i am not getting the holding item details .how to solve this
_HoldingCommand = new RelayCommand<object>(HoldedUser);

Not sure this can be done directly through MVVM binding.
The holding event won't set the selected item straight away...
If you would register to the holding event and use code behind, you'll notice the 'holded' item is only known in the HoldingRoutedEventArgs - something like this:
private async void OnListViewHolding(object sender, HoldingRoutedEventArgs e)
{
var selectedItemThroughHolding = e.OriginalSource.DataContext as ***Model;
}
So my suggestion would be to use this code behind event and reroute the selectedItem to the viewmodel there...

Related

How to handler click item from string inside of listview Windows Phone 8.1

I've been reading this article about Navigation Drawer and i Succeed, but how can i create a Click Event to each item i have inside of mu ListView?
i have that Array and bind all this to listview!
string[] menuItems = new string[5] { "Item1", "Item2", "Item3", "Item4", "Item5" };
ListMenuItems.ItemsSource = menuItems.ToList();
XAML.....
<Grid x:Name="ListFragment" Background="#F4F4F4">
<ListView x:Name="ListMenuItems" SelectedItem="true" SelectionChanged="ListMenuItems_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18" Foreground="Black" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Thanks!
Define an event handler for ItemClick event of ListView. You also need to set IsItemClickEnabled property to true.
<ListView x:Name="listview"
IsItemClickEnabled="True"
ItemClick="listView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
..
..
private void listView_ItemClick(object sender, ItemClickEventArgs e) {
// Code here
}

Xaml Tag binding fails in button flyout for windows 8.1 store app

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.

How to filter an observable collection in Windows Phone 8?

I tried this How to: Filter Data in a View so i tried this approach but it didn't work for me because windows phone 8 environment couldn't find 'ListCollectionView'.
My collection is following.
//My observableCollection
ObservableCollection<ClonedWrapper> dsForProgress = new ObservableCollection<ClonedWrapper >();
//My Function which shows at first time.
private async Task CloudImages()
{
IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();
try
{
List<MainWrapper> serverdata = new List<MainWrappe>();
serverdata = await ImageUrlAsync();//This function is returning the Deserialize object of images
if (serverdata.Count != 0)
{
foreach (var imgInfo in serverdata)
{
string folderPath = "Fagbokforlaget/Books/" + BookInfo.Id.Trim();
ClonedWrapper item = new ClonedWrapper()
{
//Name, Cover, Info, Title, IsEnableButton, IsVisibleButton,
// IsVisible are the assigned keys to the xaml page
Id = imgInfo.Id,
Name = imgInfo.Name,
Cover = await GetCoverImage(imgInfo),
Info = imgInfo.Info,
Title = imgInfo.Title,
Url = imgInfo.Url,
IsEnableButton = "True",
IsVisible = "Collapsed",
Date = Convert.ToDateTime(imgInfo.Date)
};
if (isf.DirectoryExists(folderPath))
{
item.ButtonStatus = "Read";
item.IsVisibleBookDeleteButton = "Visible";
}
else
{
item.ButtonStatus = "Download";
item.IsVisibleBookDeleteButton = "Collapsed";
}
dsForProgress.Add(item);
}
}
else
{
MessageBox.Show("You have no any downloaded books!");
}
listCloudImages.ItemsSource = dsForProgress;
}
catch (Exception exe)//I am getting exception here on extreme first run in absense of internet.
{
MessageBox.Show(exe.Message);
}
}
//My xaml page is following. It is the default page that loaded at first time. you can say it is the face of the application. User download the images. and buttonStatus convert into the Read button. so now what i am doing i will keep two buttons in appliationbar one cloud second downloaded. ON Download button click i want to show only downloaded images.
<ListBox Name="listCloudImages" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tools:WrapPanel Orientation="Horizontal">
</tools:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgBookImage" Source="{Binding Cover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="80" Height="100" ImageOpened="imgBookImage_ImageOpened"/>
<StackPanel Orientation="Horizontal">
<TextBlock Visibility="{Binding IsVisible}" Text="{Binding ProgressPercentage}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="13.5"
Foreground="White" TextTrimming="WordEllipsis"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<TextBlock Text="{Binding Info}" FontSize="13.5" FontFamily="Segoe UI"
Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center" Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}" CharacterSpacing="2"/>
<Button Content="{Binding ButtonStatus}" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton, Converter={StaticResource ButtonVisibilityIsEnableConverter}}"
Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5"
FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top"
Foreground="White">
</Button>
<Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" Visibility="{Binding IsVisible}" VerticalAlignment="Center" Margin="97,-66,0,0"
Tap="imgCancelImage_Tap" HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
<Button x:Name="btnDeleteImage" Click="btnDeleteImage_Click"
Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0"
Height="55" Width="55"
Visibility="{Binding ButtonStatus, Converter={StaticResource DeleteButtonVisibilityConverter}}">
<Button.Background>
<ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Based on your code, you can do something quite easy, if you wanna show only downloaded books try this:
private void ApplicationBarButtonShowAllDownLoaded(object sender, EventArgs e)
{
var c = (Application.Current as App).dsForProgress.Where(x => x.ButtonStatus.Equals("Download"));
listCloudImages.ItemsSource = c;
}
be sure that ObservableCollection<ClonedWrapper> dsForProgress is public
In your book model, you can pass a bool property IsDownload and when you download books you set this property to true.For your filter, just use linQ for take all books download or no dowload like this :
var noDownloadedBooks =
from b in yourObservableCollection
where b.IsDownload == false
select b;
var downloadedBooks =
from b in yourObservableCollection
where b.IsDownload == true
select b;
What you need to do is use a CollectionViewSource, this can point to your original collection and it can handle filtering!
Scott Hanselman has a great example blog post about it here... http://www.hanselman.com/blog/CollectionViewSourceIsCrazyUsefulForBindingToFilteredObservableCollectionsOnWindowsPhone8.aspx

Change windows phone toolkit pushpin content

How to change the content of toolkit pushpin via program dynamically?
I've put several pushpins on the maps on the initializing, and I want to change the content of the pushpin while user put a tap on it.
This is my xaml code:
<toolkit:MapExtensions.Children>
<toolkit:MapItemsControl x:Name="MapItems">
<toolkit:MapItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:Pushpin GeoCoordinate="{Binding Coordinate}" Tap="PinOnTap">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" Content="{TemplateBinding Content}" />
<Path Data="M0,0 L0,1 L1,0" Fill="{TemplateBinding Background}" Stretch="Fill" Margin="32,0" Height="12" Width="18"
Visibility="{Binding Content.Visibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Left" />
<Image Source="{Binding Icon_img}" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
<Border Background="White" Visibility="Collapsed" Width="200" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" Tap="gotoProfileFromPin">
<Image Margin="8" Source="{Binding Image}" VerticalAlignment="Top" Width="50" Height="50" />
<StackPanel>
<TextBlock Text="{Binding Uid}" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</Border>
</toolkit:Pushpin>
</DataTemplate>
</toolkit:MapItemsControl.ItemTemplate>
</toolkit:MapItemsControl>
</toolkit:MapExtensions.Children>
And my program.cs:
private void PinOnTap(object sender, System.Windows.Input.GestureEventArgs e)
{
var popOut = ((sender as Pushpin).Content) as Border;
popOut.Visibility = System.Windows.Visibility.Visible;
var popOutImg = (popOutNew.Child as StackPanel).DataContext;
var popUser = popOutImg as UserPin;
// function to get the images by Uid
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
popOutNew.Child.UpdateLayout();
e.Handled = true;
}
In PinOnTap function, I'll fetch a picture from another function and show it on the maps as toolkit:Pushpin.Content, However it can't work.
This code:
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
it only change the Image source but not update the UI.
I print it's value and it source has been changed, but I donno why it didn't appear on the map (the map only show the "Border" with white background and didn't have any image inside it)
I think You will have to Implement INotifyPropertyChange as th change is not reflected on Xaml .

Windows Store Apps ListView DataTemplate

I have a listview in my Windows store app:
<ListView ItemsSource="{Binding}" x:Name="lView" Grid.Column="1" HorizontalAlignment="Left" Height="586" Margin="74.714,105,0,0" VerticalAlignment="Top" Width="741" ItemTemplate="{StaticResource ImageTextListMailFolderTemplate}"/>
and a data template for this listview:
<DataTemplate x:Key="ImageTextListMailFolderTemplate">
<Grid Width="280">
<TextBlock Text="some text" FontSize="24" FontWeight="Light"
Margin="10,10,0,0" HorizontalAlignment="Left"
TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
In C# code, I'm using this as a source for listview:
List<string> GridViewData = new List<string>();
lView.ItemsSource = GridViewData;
My problem is: when I use listview without the template, all data from GridViewData is displayed in listview. But when I use DataTemplate, in each listview item is text "some text" like it is defined in template. But I want to use template, and in each item of listview show data from GridViewData. Can somebody help me please, how to do this?
Thank You
The text binding in your DataTemplate should be something like this:
Text="{Binding}"
Here is the full DataTemplate code:
<DataTemplate x:Key="ImageTextListMailFolderTemplate">
<Grid Width="280">
<TextBlock Text="{Binding}" FontSize="24" FontWeight="Light"
Margin="10,10,0,0" HorizontalAlignment="Left"
TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>