Windows Phone - how display two items on ListBox

Windows Phone - how display two items on ListBox - c#

In my project, i have two ListBox. The first is populated from JSON file. So de user select one item and click "Add" button, the item is added to ListBox 2.
But, I have an "amount" TextBox and I want that its content appears on ListBox 2 also.
Following example:
How is it my screen:
(source: infassteste.url.ph)
As it should be:
(source: infassteste.url.ph)
My code:
private void AddProd(object sender, RoutedEventArgs e)
{
if (ListBoxx.SelectedItem != null)
{
Fields fi = (Fields)this.ListBoxx.SelectedItem;
ListBoxx2.Items.Add(fi);
}
else
{
MessageBox.Show("Selecione um item para adicionar!");
}
}
My XAML:
<ListBox Name="ListBoxx"
FontSize="30"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Items}" Margin="10,10,10,411" BorderBrush="Red">
<ListBox.Background>
<SolidColorBrush Color="#FFC3C3C3" Opacity="0.51"/>
</ListBox.Background>
<!-- Template to display each item -->
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding FNome}"/>
<TextBlock Grid.Column="1" Text="{Binding FEstado}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="ListBoxx2"
FontSize="30"
HorizontalContentAlignment="Stretch"
Margin="10,311,10,10" BorderBrush="Red">
<ListBox.Background>
<SolidColorBrush Color="#FFC3C3C3" Opacity="0.51"/>
</ListBox.Background>
<!-- Template to display each item -->
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding FNome}"/>
<TextBlock Grid.Column="1" Text="{Binding FEstado}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Add a property to your Fields class to hold the quantity. Lets call it Quantity. The Modify the ListBoxx2 ItemTemplate like this.
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding FNome}"/>
<TextBlock Grid.Column="1" Text="{Binding FEstado}"/>
<TextBlock Grid.Column="2" Text="{Binding Quantity}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Then in the click event of the Button, add the following..
private void AddProd(object sender, RoutedEventArgs e)
{
if (ListBoxx.SelectedItem != null)
{
Fields fi = (Fields)this.ListBoxx.SelectedItem;
fi.Quantity = txtQuantity.Text; // SET THE Quantity..
ListBoxx2.Items.Add(fi);
}
else
{
MessageBox.Show("Selecione um item para adicionar!");
}
}
Then the value in the textbox is added to the object and it is bound to the ListBox ItemTemplate

Define new property to you class that is displayed in ListBox and bound and bind it to third TextBlock. (FNome, FEstado).
In your AddProd method you can get instance of your custom class from ListBoxx.SelectedItem and change your new property.

Related

Get value from selected databound listbox item

So I really don't know how to ask this question but this is what I am trying to achieve. I got a list box with this code:
<ListBox
x:Name="lb"
Margin="0,0,0,100"
Background="#212B34"
BorderThickness="0"
Padding="0"
SelectionChanged="lb_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0,8,0,8"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="152" BorderThickness="10,0,0,0" BorderBrush="#2E66AA" Background="#161C22" Padding="8,8,8,8">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Foreground="#2E66AA" Text="{Binding Location}" FontSize="18" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"></TextBlock>
<TextBlock Foreground="White" Text="{Binding Description}" FontSize="12" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" TextTrimming="WordEllipsis" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextWrapping="Wrap"></TextBlock>
<TextBlock Foreground="White" Text="{Binding Date}" FontSize="18" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Right"></TextBlock>
<TextBlock Foreground="White" Text="{Binding Time}" FontSize="18" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Right"></TextBlock>
<TextBlock Foreground="#2E66AA" FontSize="24" Grid.Row="3" Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" TextAlignment="Right">
<Run Text="$ "/>
<Run Text="{Binding Price}"/>
<Run Text=";"/>
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And use Azure App Service for my database. I bind the data to the listbox using itemsource:
private async void loadEvents_Click(object sender, RoutedEventArgs e)
{
IMobileServiceTable<eventTable> eventList = App.MobileService.GetTable<eventTable>();
MobileServiceCollection<eventTable, eventTable> events = await eventList
.Where(ProductTable => ProductTable.id != "")
.ToCollectionAsync();
lb.ItemsSource = events;
}
What I want to do is when a user selects a listbox item he needs to be redirected to a new page. But on this new page I need the id of the event (row in the database). So I can use this id to retrieve all further information of the event.
Maybe I need to bind the id to the listboxitem by using {Binding id} but what do I bind it to? A textblock wich I can make invisible? And if I bind it to something how do I retrieve it?
This is what I use to redirect the user to a new page:
private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
this.Frame.Navigate(typeof(eventPage));
}
If there is a different way to get al information about the selected event please tell.
I would really appreciate your help.

Get the SelectedItem from lb.SelectedItem and typecast to its corresponding class. From that, you can get the selected item's Ip. Now pass this value as the second parameter to Frame.Navigate.
private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
this.Frame.Navigate(typeof(eventPage), (eventTable)lb.SelectedItem);
}
To get this value on the next page
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var selectedItem = (eventTable)e.Parameter;
}

ListBox Selected Items are reset each time I switch tabs in may TabControl

I have the following TabControl:
<TabControl Name="tabControl" Grid.Row="0" MinWidth="270" HorizontalAlignment="Stretch" ItemsSource="{Binding Counters}" ContentTemplate="{StaticResource templateForTheContent}"
ItemTemplate="{StaticResource templateForTheHeader}">
</TabControl>
It uses this DataTemplate:
<Window.Resources>
<DataTemplate x:Key="templateForTheContent" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"
ItemsSource="{Binding}"
SelectionMode="Multiple"
BorderThickness="1" BorderBrush="#FF8B8B8B" SelectionChanged="ListBox_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding CounterName, Mode=OneWay}" />
<Run Text="{Binding InstanceName, Mode=OneWay}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Name="RAMSelectAllButton" Margin="0,10,0,0" Grid.Column="0" Grid.Row="1">
<TextBlock Text="SELECT ALL"/>
</Button>
<Button Name="RAMUnSelectAllButton" Margin="0,10,0,0" Grid.Column="1" Grid.Row="1">
<TextBlock Text="UNSELECT ALL"/>
</Button>
</Grid>
</DataTemplate>
<DataTemplate x:Key="templateForTheHeader" >
<TextBlock Text="{Binding CategoryName}"/>
</DataTemplate>
</Window.Resources>
It works as expected, binding works well, everything would be totally fine if this issue wasn't present:
Each time I switch a tab in my TabControl, selected items of a ListBox in my previous tab are reset - so when I go back to that tab - nothing is selected.
How to fix this?
//EDIT
here's my ListBox_SelectionChanged_1 method:
private void ListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
System.Windows.Controls.ListBox listBoxTemp = sender as System.Windows.Controls.ListBox;
PerformanceCounter counterTemp = (PerformanceCounter)listBoxTemp.Items[0];
if (!appData.SelectedCounters.ContainsKey(counterTemp.CategoryName))
appData.SelectedCounters.Add(counterTemp.CategoryName, new List<PerformanceCounter>());
appData.SelectedCounters[counterTemp.CategoryName].Clear();
foreach (PerformanceCounter counter in listBoxTemp.SelectedItems)
{
appData.SelectedCounters[counterTemp.CategoryName].Add(counter);
}
}
ListBox is bound to Counters, which is Observable Collection:
public ObservableCollection<ObservableCollection<PerformanceCounter>> Counters
{
get { return _Counters; }
}
ObservableCollection<ObservableCollection<PerformanceCounter>> _Counters = new ObservableCollection<ObservableCollection<PerformanceCounter>>();

(i am not familiar with TabControls, or WPF for that matter, but i would suggest a solution like this:)
Backup the selected items of your ListBox in a Dictionary.
var selectionBackups = new Dictionary<ListBox, IEnumerable<ListBoxItem>>();
I'd keep this field updated in ListBox_SelectionChanged_1(). Whenever you enter a Tab, overwrite the concerned ListBox's selection.
void TabEnter(object sender, TabEventArgs e)
{
ListBox lb = ... //acquire the current Listbox
OverwriteSelection(lb, selectionBackups[lb]); //set the ListBox's selection
}
(You might want to prevent the ListBox_SelectionChanged_1() from triggering when you restore the selection. That could be done like this:
bool auto_select = false; //set this to true while editing selections
private void ListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
if(auto_select)
return;
...
}
)

Click event on an item template

I have this wpf code for my listbox item:
<ListBox x:Name="icTodoList" ItemsSource="{Binding ListControleMachine}" Grid.Column="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="{Binding borderColor}" BorderThickness="2" Margin="0,0,0,1">
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="check_action" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding ActionCheked,Mode=TwoWay}"/>
<Ellipse x:Name="E_Ping" HorizontalAlignment="Left" Fill="{Binding PingDotColor}" Height="10" Width="10" Margin="2,4,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.2,-1.182" Grid.Column="1"/>
<TextBlock Text="{Binding titlePing}" Grid.Column="2" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titlePing}" Grid.Column="2" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleDcai}" Grid.Column="3" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleAd}" Grid.Column="4" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding FPACtitle}" Grid.Column="5" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleMcAfee}" Grid.Column="6" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding gkUser}" Grid.Column="7" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleservicestat}" Grid.Column="8" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As you can see I have a "TextBlock_MouseDown" on each textbox
Then the c# code.
private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
{
TextBlock t = sender as TextBlock;
DetailedView.DataContext = ListControleMachine.Where(x => x.ComputerName == t.Tag.ToString());
DetailedView.Visibility = System.Windows.Visibility.Visible;
}
Ok, so it does what I need basically it pop a view with data rebinded to it.
but I'm pretty sure its not a clean way to do it.
first I don't wont event on each textblock but on the listboxitem it self (but I don't know how to pass computername argument this way).
second and may bee my only problem I think I don't have to search my collection and rebind my new view with this:
DetailedView.DataContext = ListControleMachine.Where(x => x.ComputerName == t.Tag.ToString());
for be clear how to click an item template and pop a view that will contain actual listbox item binded data?

try set DataContext via binding to SelectedItem of ListBox
<DetailedView DataContext="{Binding Path=SelectedItem, ElementName=icTodoList, Mode=OneWay}"/>
or equivalent code
var binding = new Binding
{
Path = new PropertyPath("SelectedItem"),
ElementName = "icTodoList",
Mode = BindingMode.OneWay
};
BindingOperations.SetBinding(DetailedView, Control.DataContextProperty, binding);
another approach
ListBox has SelectionChanged event
<ListBox Name="icTodoList"
SelectionChanged="IcTodoList_OnSelectionChanged">
</ListBox>
event handler
private void IcTodoList_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
DetailedView.DataContext = icTodoList.SelectedItem;
DetailedView.Visibility = System.Windows.Visibility.Visible;
}
Tag values and TextBlock_MouseDown handler will be not necessary

Issues creating a flipview on ItemDetailPage

I am trying to create a flipview on the an ItemDetailpage. I am using the default template provided in visual studio when creating a grid app.
Pages in the App: GroupItemsPage, GroupDetailPage, ItemDetailPage
The problem is, I am getting this error when I click on an item on the GroupItemsPage or GroupDetailPage:
Object reference not set to an instance of an object.
Error details:
System.NullReferenceException was unhandled by user code
HResult=-2147467261
Message=Object reference not set to an instance of an object.
Source=AppError
StackTrace: at AppError.ItemDetailPage.<navigationHelper_LoadState>d__0.MoveNext()
This is my code:
GroupItemsPage.xaml
<Page
x:Name="pageRoot"
x:Class="AppError.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppError"
xmlns:data="using:AppError.Data"
xmlns:common="using:AppError.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<x:String x:Key="ChevronGlyph"></x:String>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="Items"
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
GroupItemsPage.xaml.cs
namespace AppError
{
public sealed partial class GroupedItemsPage : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
public GroupedItemsPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var sampleDataGroups = await SampleDataSource.GetGroupsAsync();
this.DefaultViewModel["Groups"] = sampleDataGroups;
}
void Header_Click(object sender, RoutedEventArgs e)
{
// Determine what group the Button instance represents
var group = (sender as FrameworkElement).DataContext;
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
this.Frame.Navigate(typeof(GroupDetailPage), ((SampleDataGroup)group).UniqueId);
}
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}
}
GroupDetailpage.xaml
<Page
x:Name="pageRoot"
x:Class="AppError.GroupDetailPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppError"
xmlns:data="using:AppError.Data"
xmlns:common="using:AppError.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"
d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Group}"
d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Grid.RowSpan="2"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Header>
<StackPanel Width="480" Margin="0,4,14,0">
<TextBlock Text="{Binding Subtitle}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding ImagePath}" Height="400" Margin="0,0,0,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<TextBlock Text="{Binding Description}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</GridView.Header>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
GroupDetailPage.xaml.cs
namespace AppError
{
public sealed partial class GroupDetailPage : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
public GroupDetailPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var group = await SampleDataSource.GetGroupAsync((String)e.NavigationParameter);
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Items"] = group.Items;
}
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}
}
ItemDetailPage.xaml
<Page
x:Name="pageRoot"
x:Class="AppError.ItemDetailPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppError"
xmlns:data="using:AppError.Data"
xmlns:common="using:AppError.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="itemViewSource"
Source="{Binding Items}"
d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Item}"
d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
TODO: Content should be placed within the following grid
to show details for the current item
-->
<FlipView
Grid.Row="1"
x:Name="flipView"
Margin="50,0,0,0"
ItemsSource="{Binding Source={StaticResource itemViewSource}}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Border>
<Image Source="{Binding ImagePath}"/>
</Border>
<TextBlock Text="{Binding Description}" Padding="0,30,0,0" TextWrapping="Wrap"/>
</StackPanel>
<Grid Grid.Column="1" Margin="30,0,0,0">
<TextBlock Text="{Binding Content}" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
ItemDetailPage.xaml.cs
namespace AppError
{
public sealed partial class ItemDetailPage : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
public ItemDetailPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var group = await SampleDataSource.GetGroupAsync((String)e.NavigationParameter);
var item = await SampleDataSource.GetItemAsync((String)e.NavigationParameter);
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Items"] = group.Items;
this.flipView.SelectedItem = item;
}
}

how to get listboxitem's value on listbox hold event?

xmal code:
<ListBox x:Name="listbox2" Margin="0,0" SelectionChanged="listbox2_SelectionChanged" Hold="listbox2_Hold" >
<ListBox.ItemContainerStyle >
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="Gray">
<Grid Width="auto" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" FontSize="40" Grid.Column="1" Grid.Row="0" Foreground="White" Text="{Binding NAME}"></TextBlock>
<TextBlock VerticalAlignment="Center" FontSize="25" Grid.Column="1" Grid.Row="1" Foreground="Blue" Text="{Binding PHONE}"></TextBlock>
<Image Name="c1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100" Stretch="Fill" Margin="0" Source="{Binding IMGS}" Grid.RowSpan="2" Grid.Column="0" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
class list which is bind to list box is
List < contactsclass > contacts = new List < contactsclass >();
PHONE and NAME are getter setter of the contactclass's variables
how can i get this variable's value on hold event of listbox .. i am trying following code
private void listbox2_Hold(object sender, System.Windows.Input.GestureEventArgs e)
{
//contextmenucontact = (contactsclass)(sender as ListBox).DataContext;
contextmenucontact = (contactsclass)listbox2.SelectedItem;
MessageBox.Show(contextmenucontact.name);
}

if is just the selected item is just use the ToString Function, see this:
if (listBox1.SelectedItem != null)
{
string itemText = listBox1.SelectedItem.ToString();
contextmenucontact = new contactsclass();
contextmenucontact.name = itemText;
MessageBox.Show(contextmenucontact.name);
}

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Windows Phone - how display two items on ListBox - c#

Define new property to you class that is displayed in ListBox and bound and bind it to third TextBlock. (FNome, FEstado). In your AddProd method you can get instance of your custom class from ListBoxx.SelectedItem and change your new property.

Related

Get value from selected databound listbox item

ListBox Selected Items are reset each time I switch tabs in may TabControl

Click event on an item template

Issues creating a flipview on ItemDetailPage

how to get listboxitem's value on listbox hold event?

Categories

Resources