I wanted to Develop a similar layout like Longlist Selector Wp8 in Windows phone 8.1.
I came across a issue, my list is not appearing.
XAML page
<Grid >
<Grid.Resources>
<CollectionViewSource x:Name="MainGrps"
IsSourceGrouped="True"/>
</Grid.Resources>
<ListView ItemsSource="{Binding Source={StaticResource MainGrps}}" Margin="50">
<ListView.ItemTemplate>
<DataTemplate >
<Grid Background="Gray">
<StackPanel>
<TextBlock Foreground="White" FontSize="20" Text="{Binding ItmName}"/>
<TextBlock Foreground="White" FontSize="20" Text="{Binding ItmType}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" >
<GroupStyle.HeaderTemplate>
<DataTemplate >
<Grid Background="Red">
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding GrpItmName}" Foreground="White"/>
<TextBlock Text="{Binding ItemsCount}" Foreground="White"/>
</StackPanel>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
Code Behind:
private void OnPageLoaded(object sender, RoutedEventArgs e)
{
lst_grp = new List<Grp>();
for (int i = 0; i < 10; i++)
{
Grp grp = new Grp();
grp.GrpItmName = "grp name " + i;
grp.ItemsCount = i;
grp.LstItms = new List<Itm>();
Itm itm = new Itm();
itm.ItmName = "itm name " + i;
itm.ItmType = "itm type " + i;
grp.LstItms.Add(itm);
grp.LstItms.Add(itm);
grp.LstItms.Add(itm);
lst_grp.Add(grp);
}
this.MainGrps.Source = lst_grp;
}
Is there any problem with above code?
Please help me to figure it out or suggest if you have working code.
Change
<GroupStyle HidesIfEmpty="True" >
to:
<GroupStyle HidesIfEmpty="False" >
Try to add this in the XAML inside the ListView tag:
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Or try to set the width and the height parameter of the ListView manually.. Just to try..
Let me know!
Related
I have Windows 8.1 Hub App that will eventually be released for tablets. I want to add MenuFlyout to GridView. So if I right click or hold then flyout will display. I've gone through several videos, tutorials etc. but none of them relates to GridView. Only for ListView on WindowsPhone. So none of them show how I should approach.
Is it possible? How I should deal with it?
HubSection
This is how my Hubsection with GridView looks like.
<HubSection x:Name="CalcButtons" x:Uid="calculator" Header="{Binding Res.calc2Header, Source={StaticResource SharedStrings}}">
<DataTemplate>
<GridView
ItemsSource="{Binding}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource StandardCalcButton}"
SelectionMode="None"
IsItemClickEnabled="True" Margin="0,0,0,0" ItemClick="GridView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
StandardCalcButton
I've created MenuFlayout as resource in App.xaml and attached it to GridViewItem DataTemplate. So it looks like this.
<MenuFlyout x:Key="CalcFlyout">
<MenuFlyoutItem Text="Test1"/>
<MenuFlyoutItem Text="Test2"/>
</MenuFlyout>
<DataTemplate x:Key="StandardCalcButton" >
<Grid Height="180" Width="180" Margin="5,5,5,5" FlyoutBase.AttachedFlyout="{StaticResource CalcFlyout}" >
<Border Height="180" Background="{StaticResource AppYellow}">
<StackPanel Grid.Row="1" Margin="0,0,0,0">
<Image Source="{Binding ImagePath}" AutomationProperties.Name="{Binding Title}" Height="130" Width="180"/>
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" TextLineBounds="Tight" TextAlignment="Center"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="NoWrap" TextLineBounds="Tight" LineStackingStrategy="BlockLineHeight" TextTrimming="CharacterEllipsis" TextAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</DataTemplate>
This is how I want to make Flyout to open in GridView_ItemClicked
private void GridView_ItemClick(object sender, ItemClickEventArgs e){
FrameworkElement senderElement = e.ClickedItem as FrameworkElement;
if (senderElement == null)
{
Debug.WriteLine("null");
return;
} else
{
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
flyoutBase.ShowAt(senderElement);
}
}
''ClickedItem'' is object which I deliver in ''GridView.DataContext'' so there is no way that it will be castable to FrameworkElement.
Now I'm stuck. I'll be thankful for any guidance.
You can try the following:
private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
var gridViewItemsControl = sender as ItemsControl;
var clickedItemContainer = gridViewItemsControl.ContainerFromItem(e.ClickedItem);
Debug.WriteLine(clickedItemContainer);
var clickedGridViewItem = clickedItemContainer as GridViewItem;
var clickedItemGrid = clickedGridViewItem.ContentTemplateRoot as Grid;
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(clickedItemGrid);
flyoutBase.ShowAt(clickedItemGrid);
}
Hope i helps! :)
I know there should be a simple solution to this question but I just cant seem to figure it out here is what my code looks like:
<ListBox HorizontalAlignment="Left"
x:Name="locationsNB"
VerticalAlignment="Top"
Height="563"
Width="455"
SelectionChanged="locationsNB_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="18,0,0,0"
x:Name="placeDetails">
<Image Source="{Binding icon}"
Height="40"
Width="40"
VerticalAlignment="Top"
Margin="0,10,8,0" />
<StackPanel Width="350">
<TextBlock Text="{Binding name}"
FontSize="35"
Foreground="#399B81"
TextWrapping="Wrap" />
<TextBlock Text="{Binding vicinity}"
FontSize="20"
Foreground="#888888"
TextWrapping="Wrap" />
<TextBlock x:Name="reference"
Text="{Binding reference}"
Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to get the stackpanel->reference text (Text="{Binding reference}") of the selected item I dont know what my C# should look like but any help will be greatly appreciated.
If the ItemsSource of your ListBox is bound to a collection of items then you can use the SelectedItem property of the ListBox
private void locationsNB_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listbox = (ListBox)sender;
var myObject = listbox.SelectedItem as MyCustomObject;
if (myObject == null) return;
// perform your custom logic with this item
}
I have i little and simple problem. I think.
I have to Listpickers where the second depends on the selection from the first.
I've thought that i could easily be done with use of selectionchanged on the first Listpicker and then get the selected index.
<toolkit:ListPicker ExpansionMode="FullScreenOnly" Grid.Row="0" Name="customers" FullModeHeader="Kunder" Margin="10,50,10,10" Width="350" HorizontalAlignment="Left" SelectionChanged="customers_SelectionChanged">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="12,0,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16,20,0,20">
<TextBlock Text="{Binding Title}" Margin="16,0,0,0" FontSize="30" FontFamily="{StaticResource PhoneFontFamilyLight}"></TextBlock>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
And the code for selectionchanged:
private void customers_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int selindex = customers.SelectedIndex;
MessageBox.Show("index : " + selindex);
Guid costumerid = customers[selindex].id;
Loadprojects();
}
My problem is that selindex always equals -1 and then i get a out of range exception.
What is the best way to solve this?
private void customers_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int selindex = customers.SelectedIndex;
if (selindex==-1) return;
MessageBox.Show("index : " + selindex);
Guid costumerid = customers[selindex].id;
Loadprojects();
}
I need to get the values from Listbox selected items. Note that, the data templates are in data bound. here is the xaml:
<ListBox Name="AppointmentResultsData" ItemsSource="{Binding}" Height="650" Width="480" Margin="24,0,0,0" Foreground="#CBF7FA" SelectionChanged="AppointmentResultsData_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Path=Subject, Mode=TwoWay}" TextWrapping="Wrap" FontSize="30" Grid.Column="0" Grid.Row="1"/>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Path=Account.Name}" Grid.Column="0" Grid.Row="1" FontSize="28"/>
<TextBlock Text="Start : " Grid.Column="0" FontSize="22" Grid.Row="2"/>
<TextBlock Text="{Binding Path=StartTime}" FontSize="22" Grid.Column="1" Grid.Row="2"/>
<TextBlock Text="End : " Grid.Column="0" Grid.Row="3" FontSize="22"/>
<TextBlock Text="{Binding Path=EndTime}" Grid.Column="1" FontSize="22" Grid.Row="3"/>
<TextBlock Text="Location : " Grid.Column="0" Grid.Row="4" FontSize="22"/>
<TextBlock Text="{Binding Path=Location}" Grid.Column="1" FontSize="22" Grid.Row="4"/>
<TextBlock Text="Status : " Grid.Column="0" FontSize="22" Grid.Row="5"/>
<TextBlock Text="{Binding Path=Status}" Grid.Column="1" FontSize="22" Grid.Row="5"/>
</Grid>
<TextBlock Text=" "/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I need values of the textboxes in selection changed event.I have tried like this...
private void AppointmentResultsData_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//SelectedEvent seleted = AppointmentResultsData.SelectedItem as SelectedEvent;
if (AppointmentResultsData.SelectedIndex == -1)
return;
ListBoxItem currentSelectedListBoxItem = this.AppointmentResultsData.ItemContainerGenerator.ContainerFromIndex(AppointmentResultsData.SelectedIndex) as ListBoxItem;
if (currentSelectedListBoxItem == null)
return;
// Iterate whole listbox tree and search for this items
TextBox nameBox = helperClass.FindDescendant<TextBox>(currentSelectedListBoxItem);
TextBlock nameBlock = helperClass.FindDescendant<TextBlock>(currentSelectedListBoxItem);
MessageBox.Show(nameBlock.Text + " " + nameBox.Text);
}
But it didn't work !
Solved it !
private void AppointmentResultsData_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listBoxItem = AppointmentResultsData.ItemContainerGenerator.ContainerFromIndex(AppointmentResultsData.SelectedIndex) as ListBoxItem;
var txtBlk = FindVisualChildByType<TextBlock>(listBoxItem, "txtLocation");
MessageBox.Show(txtBlk.Text);
}
T FindVisualChildByType<T>(DependencyObject element, String name) where T : class
{
if (element is T && (element as FrameworkElement).Name == name)
return element as T;
int childcount = VisualTreeHelper.GetChildrenCount(element);
for (int i = 0; i < childcount; i++)
{
T childElement = FindVisualChildByType<T>(VisualTreeHelper.GetChild(element, i), name);
if (childElement != null)
return childElement;
}
return null;
}
Suppose you have a list of class(MyClass) objects which you have databinded to listbox
Add a handler gesturelistener tap to the datatemplate
In the handler do this:
private void ItemClickedEventHandler(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
MyClass clickedMyclass = (MyClass)((System.Windows.Controls.Grid)sender).DataContext;
}
you have the object of the current selected item and you can access all the class variables. eg(StartTime etc.)
Well you are casting it to the wrong type, this should work :
private void AppointmentResultsData_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listBoxItem = AppointmentResultsData.SelectedItem as ListBoxItem;
TextBox nameBox = listBoxItem .FindName("nameYourTextBox") as TextBox;
TextBlock nameBlock = dd.FindName("nameYourTextBlock") as TextBlock;
MessageBox.Show(nameBlock.Text + " " + nameBox.Text);
}
of course you need to add the Name to your TextBox and TextBlock
<TextBlock x:Name="nameYourTextBlock Text="{Binding Path=Account.Name}" Grid.Column="0" Grid.Row="1" FontSize="28"/>
Plus I don't see any TextBox in your XAML.
while programming for windows phone 7, I created a listbox and using DataTemplate which contains a textblock and a textbox. The textbox is hided by default.
The XAML:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="460" Height="60" Background="{StaticResource PhoneAccentBrush}">
<TextBlock Text="{Binding data}" FontSize="30" Margin="10,10,10,0"/>
<TextBox Height="60" Width="460" Visibility="Collapsed"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The effect I wanna accomplish is : Tap textblock to hide textblock while show textbox.
CODE BEHIND:
private void TextBlock_Tap(object sender, GestureEventArgs e)
{
TextBlock.Visibilty = Visibility.Collapsed;
TextBox.Visibilty = Visibility.Visible;
}
However, obviously the selector isn't correct. I tried to add Name for textbox and textblock, but Name seems does not work in Data Template. Is there anyone who can tell me how can i select the textblock and textbox in a Data Template please? Many Thanks!!!
Try this :
<ListBox Name="lst" >
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="460" Height="60" Background="{StaticResource PhoneAccentBrush}" Tap="Canvas_Tap">
<TextBlock Text="{Binding}" FontSize="30" Margin="10,10,10,10"/>
<TextBox Height="60" Width="460" Visibility="Collapsed" Text="text"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And in code behind:
private void Canvas_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
var m = (sender as Canvas).Children;
foreach (UIElement x in m)
{
if ((x as TextBlock) != null)
(x as TextBlock).Visibility = Visibility.Collapsed;
if ((x as TextBox) != null)
(x as TextBox).Visibility = Visibility.Visible;
}
}
Setting the Name on the template does work, but you can't access it directly!
Instead, try it like this:
<ListBox x:Name="MyListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="460" Height="60" Background="{StaticResource PhoneAccentBrush}">
<TextBlock x:Name="MyTextBlock" Text="{Binding data}" FontSize="30" Margin="10,10,10,0" Tap="MyTextBlock_Tap" />
<TextBox x:Name="MyTextBox" Height="60" Width="460" Visibility="Collapsed"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And the code:
private void MyTextBlock_Tap(object sender, GestureEventArgs e)
{
var elem = (FrameworkElement)sender;
var myTextBlock = (TextBlock)elem.FindName("MyTextBlock");
var myTextBox = (TextBox)elem.FindName("MyTextBox");
myTextBlock.Visibility = Visibility.Collapsed;
myTextBox.Visibility = Visibility.Visible;
}