listbox not showing all items windows phone 8.1 - listbox

I'm trying to populate a listbox using binding in windows phone 8.1. I can't see all of the items in the control.
XAML:
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="Application Name" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<StackPanel Grid.Row="1" x:Name="ContentRoot" Margin="19,0,19,0">
<ComboBox
x:Name="ComboBox1"
ItemsSource="{Binding}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
SelectionChanged="ComboBox1_SelectionChanged"
/>
<ListBox x:Name="ListBox1" ItemsSource="{Binding}" Height="1000">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="0">
<TextBlock Text="{Binding GameName}" Margin="2"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
I populate the listbox in code:
private ObservableCollection<Game> _Games = new ObservableCollection<Game>();
public StartPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += this.NavigationHelper_LoadState;
this.navigationHelper.SaveState += this.NavigationHelper_SaveState;
ListBox1.DataContext = _Games;
}
....
private async void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var group = _Groups[ComboBox1.SelectedIndex];
games = await DataServer.GetGamesAsync(group.GroupName);
_Games.Clear();
foreach (var game in games.OrderBy(g => g.GameName))
{
_Games.Add(game);
}
}
There are 69 games but I can only see about 28 in the list view in the emulator when I scroll the list. It's clear that there are more items in the list, but I can't scroll to them. Any help is appreciated.

Replace the StackPanel with a Grid and add a couple more RowDefinitions in the second Grid you'll add. StackPanels don't size themselves dynamically, so instead of sizing to the screen, it's just stretched infinitely to the bottom.

Related

Xamarin Form: Select ViewCell data through Button

I have a ListView in which I have button. And I want to select the ViewCell's data when I click on the button.
Here is my XAML code
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<!--<Image Source="{Binding image, Converter={StaticResource ByteArrayToImage}}" HeightRequest="50" WidthRequest="50" />-->
<StackLayout Padding="6" HorizontalOptions="StartAndExpand">
<Label Text="{Binding strItemName}" FontSize="13"
/>
<Label Text="{Binding numSalePrice, StringFormat='Rs. {0:N}'}" FontSize="11"
TextColor="#da3043" />
</StackLayout>
<Button Text="Add To Cart" WidthRequest="100"
HeightRequest="31"
BackgroundColor="#10c3f2"
FontSize="10"
TextColor="White"
VerticalOptions="Center" Clicked="Button_Clicked" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I don't want to work with ViewCellTap, I need to get the ViewCell's data from the button inside the ListView.
you can bind the data to CommandParameter
<Button CommandParameter="{Binding .}" ...
then in your event handler
protected void Button_Clicked(object sender, EventArgs a)
{
// assuming your data is a type MyClass
var item = (MyClass)((Button)sender).CommandParameter;
// now you can ref item.strItemName, item.numSalePrice, etc
}

ListView moving on Keyboard activation in IOS xamarin forms

I have a problem with Entry and ListView in Xamarin Forms. On Android, it works perfectly but on IOS when Focus is set on Entry, ListView will be moved up like on the image:
I tried to use a render:
How do I keep the keyboard from covering my UI instead of resizing it?
but it didn't solve a problem, in my case because I need ListView moved not the whole page! I also found that this was a known issue:
https://bugzilla.xamarin.com/show_bug.cgi?id=45336
https://www.youtube.com/watch?v=1xwDRT_CnoM&feature=youtu.be
Any suggestions how to turn off moving elements when the keyboard is activated?
And I need Focus set to true in this case!
The code in XAML is next:
<myControls:MyEntry Grid.Row="0" Style="{DynamicResource EntryControlStyle}"
x:Name="CityEntry" AutomationId="SearchCityEntry"
Placeholder="{Binding TravelType, Converter={StaticResource LanguageConverter}, Mode=OneWay}"
Text="{Binding Path=SearchQuery}" />
<myControls:MyListControl
Grid.Row="1"
SeparatorVisibility="None"
HasUnevenRows="True"
IsRefreshing="{Binding IsRefreshing}"
RefreshCommand="{Binding RefreshCommand}"
x:Name="SelectCity"
ItemsSource="{Binding Path=SearchResults}"
SelectedItem="{Binding SelectedCity}">
<myControls:MyListControl.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView BackgroundColor="White">
<Grid Margin="10,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="Start"
VerticalOptions="Start">
<Image HorizontalOptions="Start" VerticalOptions="Start"
Source="{Binding LocationSource,Converter={StaticResource LocationSourceEnumToImageConverter} }" />
</StackLayout>
<Label Grid.Column="1" AutomationId="SearchCityList"
HorizontalOptions="StartAndExpand"
Text="{Binding Path=Name, Mode=TwoWay}"
Style="{DynamicResource EntryControlStyle}" />
</Grid>
</ContentView>
</ViewCell>
</DataTemplate>
and code behind:
protected override void OnAppearing()
{
base.OnAppearing();
CityEntry.Focus();
}
protected override void OnDisappearing()
{
CityEntry.Unfocus();
base.OnDisappearing();
}
protected override bool OnBackButtonPressed()
{
CityEntry.Unfocus();
return base.OnBackButtonPressed();
}

How to add different background colors to alternate rows to list box items windows phone 8

I'm new to windows phone development.
I'm showing data in list box. For for all rows in the list box the back ground color is same.
But I want to add two different colors for alternate rows to list box items.
Below is the code for list view.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,10,0,0" Background="White">
<ListBox Margin="6,6,-6,6" Name="itemslb" SelectionChanged="itemList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Height="100" Margin="0,10,0,0">
<StackPanel Width="85" Height="100" >
<StackPanel.Background>
<ImageBrush x:Name="defImage" ImageSource="/DailyFeeds;component/Images/default.png" Stretch="None"></ImageBrush>
</StackPanel.Background>
<Image Source="{Binding ImageUrl}" VerticalAlignment="Top" Height="90" Width="85" Margin="0,0,10,0" Stretch="Fill" />
</StackPanel>
<StackPanel Width="370">
<TextBlock Text="{Binding Title}" Foreground="SlateBlue" FontSize="25" TextWrapping="Wrap" />
<TextBlock Text="{Binding Date}" Foreground="#FFC8AB14" FontSize="20"/>
</StackPanel>
</StackPanel>
<Image x:Name="line" Grid.Row="1" Width="460" HorizontalAlignment="Center" Margin="0,5,0,0" Source="/DailyFeeds;component/Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
How can we do that.
Thanks
create a converter class
public class AlternateRowColour : IValueConverter
{
bool isAlternate;
SolidColorBrush even = new SolidColorBrush(Colors.Transparent); // Set these two brushes to your alternating background colours.
SolidColorBrush odd = new SolidColorBrush(Color.FromArgb(255, 241, 241, 241));
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
isAlternate = !isAlternate;
return isAlternate ? even : odd ;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
add converter to the page
<UserControl
xmlns:conv="clr-namespace:MyApplication.Converters"
<UserControl.Resources>
<conv:AlternateRowColour x:Key="RowColour" />
</UserControl.Resources>
</UserControl>
ur listBox
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="{Binding Converter={StaticResource RowColour}}"> // your stackPanel
<!-- layout XAML -->
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Define a Class
public class RowData
{
public string text { get; set; }
public Brush brush { get; set; }
}
XAML Code
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="listBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="60" Width="480" Background="{Binding brush}">
<TextBlock VerticalAlignment="Center" Margin="12,0" Text="{Binding text}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
C# code
ObservableCollection<RowData> items = new ObservableCollection<RowData>();
items.Add(new RowData() { text = "Text 1", brush = new SolidColorBrush(Colors.Red) });
items.Add(new RowData() { text = "Text 2", brush = new SolidColorBrush(Colors.Green) });
items.Add(new RowData() { text = "Text 3", brush = new SolidColorBrush(Colors.Red) });
items.Add(new RowData() { text = "Text 4", brush = new SolidColorBrush(Colors.Green) });
items.Add(new RowData() { text = "Text 5", brush = new SolidColorBrush(Colors.Red) });
listBox.ItemsSource = items;
or:
<Grid>
<Grid.Resources>
<AlternationConverter x:Key="BackgroundConverter">
<SolidColorBrush>Blue</SolidColorBrush>
<SolidColorBrush>CornflowerBlue</SolidColorBrush>
<SolidColorBrush>LightBlue</SolidColorBrush>
</AlternationConverter>
<AlternationConverter x:Key="AlternateForegroundConverter">
<SolidColorBrush>White</SolidColorBrush>
<SolidColorBrush>Black</SolidColorBrush>
<SolidColorBrush>Navy</SolidColorBrush>
</AlternationConverter>
<Style x:Key="alternatingWithBinding" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(ItemsControl.AlternationIndex),
Converter={StaticResource BackgroundConverter}}"/>
<Setter Property="Foreground"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(ItemsControl.AlternationIndex),
Converter={StaticResource AlternateForegroundConverter}}"/>
</Style>
</Grid.Resources>
<ListBox AlternationCount="3" ItemsSource="{StaticResource data}"
ItemContainerStyle="{StaticResource alternatingWithBinding}"/>
</Grid>

Textblock text not wrapping in wp7 app

new to wp7 and i have not the faintest idea why the textblock text is not wrapping?
<Popup x:Name="EulaPopUp" IsOpen="False">
<Grid Background="White" Width="{Binding ElementName=LayoutRoot, Path=Width}" Height="{Binding ElementName=LayoutRoot, Path=Height}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<TextBlock Foreground="Black" Text="End User License Agreement" VerticalAlignment="Top" Grid.Row="0"/>
<ScrollViewer HorizontalAlignment="Left" Name="scrollViewer1" Width="{Binding ElementName=ContentPanel, Path=Width}" VerticalAlignment="Top" Margin="0,30,0,0" Grid.Row="1">
<TextBlock Name="eulaTxt" Width="{Binding ElementName=ContentPanel, Path=Width}" Text="{Binding Path=AppResources.EULA, Source={StaticResource AppResources} }" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" />
</ScrollViewer>
<Button Grid.Row="2" Content="I Agree" Background="Green" Height="70" HorizontalAlignment="Center" Margin="0" Name="EulaOK" VerticalAlignment="Bottom" Width="160" />
</Grid>
</Popup>
I'm binding the widths of the elements so that when the device reorients the widths adjust accordingly. Is this wrong? How can I fix it? Thanks
U can actually customize ur message box..something like this ...
public static void customizedMessageBox(int messageboxtype, string title, string text, IEnumerable<string> buttons, int focusbutton, MessageBoxIcon icon, AsyncCallback callback, object state)
{
if (!Guide.IsVisible)
{
try
{
ProgressBarControl.dismissProgressBar();
Guide.BeginShowMessageBox(" ", text, buttons, focusbutton, MessageBoxIcon.None, callback, state);
messageboxType = messageboxtype;
}
catch (GuideAlreadyVisibleException ex)
{
Logger.log("MsgBox", "Exception : messageboxtype: " + messageboxtype
+ "\n" + ex.Message + "\n" + ex.StackTrace);
}
}
//return messageboxtype;
}
and for ur text wrapping query.. I have the same type of design in my app..i.e, Eula screen to present the license agreement .. what we have used is something like this..
<Grid x:Name="EulaGrid" Grid.Row="1" Visibility="Collapsed">
<ListBox x:Name="lbEula" Margin="18,100,19,135" ScrollViewer.VerticalScrollBarVisibility="Visible" Style="{StaticResource ListBoxStyle1}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Text}"
TextWrapping="Wrap"
IsHitTestVisible="False"
Width="Auto" FontFamily="Arial" FontSize="18" Foreground="Black" x:Name="eulaText" Grid.ColumnSpan="2" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
make the width Auto so that it will adjust accordingly for both orientations.. I hope it helps u.. Gud luck :)
I'm curious as to why you're not using a MessageBox to show the License Agreement in, rather than attempting to re-create it as a custom control?

Silverlight ValidationSummary screen real estate

Silverlight 3;
I have a ValidationSummary in the top row of my grid. When the ValidationSummary appears, it pushes my button row (row 3) off the bottom of the displayable screen.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<di:ValidationSummary Grid.Row="0" />
<Grid x:Name="gridOuterContentHolder"
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="0.68*" />
<RowDefinition Height="5" />
<RowDefinition Height="0.32*" />
</Grid.RowDefinitions>
<!-- elements removed for brevity -->
</Grid>
<StackPanel x:Name="stack"
Grid.Row="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Content="Delete"
x:Name="btnDelete"
Height="20"
Width="75" />
</StackPanel>
</Grid>
I'm a code monkey not a pixel pusher and can't figure out which combination of Stretch's, Auto's and *'s I need. Any pushers out there that can help??
Thanks,
Mark
I was able to do this by making the validationsummary control a child of scrollview with a maxheight set. This limits the ability of the validationsummary to stretch beyond its parent's maxheight.
Because by default, validationsummary controls use a getparent() to determine the control they are validating, this requires you to manually override the target when the appication innitializes (in vb I do it in the new() routine of my page class.
MyValidationSummary.Target = TheNewGrid
You probably don't want to see the scrollviewer when there are no errors, so set it to Collapsed and in the make it visible only with the validationsummary has errors:
Private Sub MyValidationSummary_LayoutUpdated(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyValidationSummary.LayoutUpdated
If MyValidationSummary.HasErrors Then
svMyValidationSummary.Visibility = Windows.Visibility.Visible
Else
svMyValidationSummary.Visibility = Windows.Visibility.Collapsed
End If
End Sub
I can't seem to get this editor to not screw up the xaml, here's a link:
example
<ScrollViewer Visibility="Collapsed" x:Name="svMyValidationSummary" MaxHeight="200" Margin="6" BorderThickness="1">
<dataInput:ValidationSummary FocusControlsOnClick="True" x:Name="MyValidationSummary"></dataInput:ValidationSummary>
</ScrollViewer>
<data:DataGrid Margin="10" AutoGenerateColumns="False" Width="1250" x:Name="TheNewGrid" Height="350">
<data:DataGrid.Columns>
<local:DataGridTemplateColumnBindingText CanUserReorder="False" CanUserResize="False"
HeaderStyle='{StaticResource RowHeaderColumnStyle}' >
<local:DataGridTemplateColumnBindingText.CellEditingTemplate>
<DataTemplate>
<controlsToolkit:DockPanel HorizontalAlignment="Stretch">
<StackPanel controlsToolkit:DockPanel.Dock="Right" Orientation="Horizontal">
<Button ToolTipService.ToolTip="Insert an empty row" Click="btnInsertRow_Click">
<Image Source="add.png"></Image>
</Button>
<Button ToolTipService.ToolTip="Copy row" Click="btnDuplicateRow_Click">
<Image Source="application_double.png"></Image>
</Button>
<Button ToolTipService.ToolTip="Delete row" Click="btnDeleteRow_Click">
<Image Source="delete.png"></Image>
</Button>
</StackPanel>
<Border BorderThickness="1" Background="PowderBlue">
<TextBlock controlsToolkit:DockPanel.Dock="Left" TextAlignment="Center" HorizontalAlignment="Stretch" Text="{Binding SortNumber}"></TextBlock>
</Border>
</controlsToolkit:DockPanel>
</DataTemplate>
</local:DataGridTemplateColumnBindingText.CellEditingTemplate>
</local:DataGridTemplateColumnBindingText>
</data:DataGrid.Columns>
</data:DataGrid>

Resources