I would like to know how to construct the ListBox in WP7 that only load 20 items at a single time, and have a footer that show "load more" if there is any.
When user press the "load more", it will load another 20 in the list without loading the previous loaded data?
I am using LINQ at the behind source.
my code for XMAL as follow:
<Grid>
<ListBox name="newsIndexListBoxEN">
<ListBoxItem>
<DataTemplate>
<StackPanel Width="410" Orientation="Horizontal" VerticalAlignment="Top" Margin="0,5,0,5">
<StackPanel Background="DarkBlue" Margin="10,0,0,0" Height="100" Width="100" VerticalAlignment="Top">
<TextBlock Name="columnsTypeTB" Text="{Binding pType}" Margin="0,0,0,0" Foreground="White" FontSize="23" HorizontalAlignment="Center" />
<Image Width="100" Height="100" VerticalAlignment="Top" HorizontalAlignment="Center" Source="Background.png" />
</StackPanel>
<StackPanel Width="300" Height="100" Margin="0,0,0,0">
<Path Margin="0,0,0,0" Data="M39,8 L389,8" Fill="DarkBlue" Height="1" Stretch="Fill" Stroke="DarkBlue" UseLayoutRounding="False" Width="400"/>
<TextBlock Margin="8,0,0,0" Text="{Binding pTitle}" Tag="{Binding pID}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Width="292" Height="66" />
<TextBlock Margin="8,5,0,0" Text="{Binding pDate}" Tag="{Binding pID}" MouseEnter="NewsViewContent_mouseEnter" Style="{StaticResource PhoneTextSmallStyle}" VerticalAlignment="Bottom" TextWrapping="Wrap" Width="292" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBoxItem>
</ListBox>
</Grid>
C# Code as follow:
using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream fs = storage.OpenFile(fileName, FileMode.Open))
{
XDocument menuIndex = XDocument.Load(fs);
var menuIndexList = from query in menuIndex.Descendants("news")
orderby (int)query.Element("newsID") descending
select new mkmenu
{
pID = query.Element("newsID").Value,
pTitle = query.Element("newsTitle").Value,
pDate = query.Element("newspDate").Value,
pType = newsType
};
newsIndexListBoxEN = menuIndexList.Count();
}
}
any ideas? sample code?
You can edit your listbox template to show a "Load more" button at the end of the list. In Blend, right click on your listbox, choose Edit Template, Edit a copy. By default, your listbox has a template like this:
ScrollViewer
ItemPresenter
Wrap your ItemPresenter into a StackPanel, then add a button at the end:
ScrollViewer
StackPanel
ItemPresenter
Button
That button will always be displayed at the end of the listbox. Handle the Clicked event of that button to add items to your ObservableCollection.
You can bind your listbox to ObservableCollection and add first 20 items on your page(app) load. Than after pressing "load more" get next 20 items and add to collection. Items will automatically be added to listbox.
Related
i have a list box in which there are different controls like button , text box etc in its item template, i have a collection which i bind with listbox, it works fine , but now i want to move my code to MVVM , and i write some commands in my View Model for clicks events of buttons , how can i bind my collection + my commands to list box ??? because commands are not in the collection, this is the Data Template for my list Box
<DataTemplate x:Key="listItemTemplate">
<Grid ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Name="commentsPanel" LastChildFill="False" MinWidth="350">
<TextBlock Name="txtUserName" IsEnabled="False" Text="{Binding UserName}"
Width="Auto" DockPanel.Dock="Left" Foreground="GhostWhite" Margin="0,6,0,0"></TextBlock>
<TextBlock Name="txtDate" IsEnabled="False" Text="{Binding CreateDt}"
Width="Auto" DockPanel.Dock="Left" Foreground="Green" Margin="4,6,0,0"></TextBlock>
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Width="{Binding EditPanelWidth}" x:Name="EditDeletePanel" Visibility="{Binding ButtonVisibilityText }">
<Button Name="btnEdit" Content="Edit" Width="Auto" DockPanel.Dock="Right" Height="20"
Click="btnEdit_Click_1" Margin="4,4,0,4" Foreground="GhostWhite" VerticalContentAlignment="Top" Visibility="{Binding ButtonVisibilityText}"></Button>
<Button Name="btnDelete" Content="Delete" Width="Auto" Height="20" VerticalContentAlignment="Top" DockPanel.Dock="Right" Visibility="{Binding ButtonVisibilityText}"
Click="btnDelete_Click_1" Margin="4"></Button>
</StackPanel>
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" x:Name="SaveCancelPanel" Visibility="{Binding CancelSaveEnableText}">
<Button Name="btnSave" Content="Save" Width="Auto" Height="20" DockPanel.Dock="Right"
Click="btnSave_Click_1" Margin="4"></Button>
<Button Name="btnCancel" Content="Cancel" Height="20" Width="Auto" DockPanel.Dock="Right"
Click="btnCancel_Click_1" Margin="4"></Button>
</StackPanel>
</DockPanel>
<dxe:TextEdit ShowBorder="False" Grid.Row="1" Name="txtComment" Width="Auto" Foreground="Red"
TextWrapping="WrapWithOverflow" EditValue="{Binding Note}" IsEnabled="{Binding IsCommentTextEnable}">
</dxe:TextEdit>
<dxe:TextEdit Text=".............." Grid.Row="2" ShowBorder="False" IsEnabled="False">
</dxe:TextEdit>
</Grid>
</DataTemplate>
and here is the collection + my commands which i want to bind to buttons ,
public ICommand CancelCommand
{
get { return _cancelCommand ?? (_cancelCommand = new CommandHandler(Cancel)); }
set { _cancelCommand = value; }
}
public TList<ProgramNote> NotesCollection
{
get { return _notes; }
set
{
_notes = value;
RaisePropertyChanged("NotesCollection");
}
}
I know i can use this code to bind my commands with button
<Button Command={Binding CancelCommand}
but this command is not present in the collection , i am new in MVVM , kindly help , may be i am missing some little thing to bind my commands , but i am confused that how to add commands in my collection , so that i can get them in my view
You can bind the commands to your data template buttons etc by finding the appropriate viewmodel
example
<DataTemplate x:Key="listItemTemplate">
<Button Command="{Binding DataContext.CancelCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=LixtBox}}"
CommandParameter="{Binding}">
</DataTemplate>
in example we'll find the datacontext of LixtBox which I assume to be your viewmodel then will bind to the command and pass the current object as the command parameter to perform actions on.
you'll then receive the item as parameter in the implementation of your command
public void Execute(object parameter)
{
ProgramNote note = parameter as ProgramNote;
//your logic here, eg cancelling download etc.
}
Thanx to all of you specially thanx to #Sheridan and #PushPraj, I am able to do it now , here is the code of data template in which i have a button
<Button Name="btnCancel" Content="Cancel" Height="20" Width="Auto" DockPanel.Dock="Right"
Command="{Binding DataContext.CancelCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=dxe:ListBoxEdit}}"
CommandParameter="{Binding}" Margin="4"></Button>
and this is the code of ListBox
<dxe:ListBoxEdit Name="listComments" Grid.Row="1" ItemTemplate="{StaticResource listItemTemplate}"
ItemsSource="{Binding NotesCollection}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible" >
</dxe:ListBoxEdit>
and lastly this is my back end code
listComments.DataContext = viewModel;
It's always difficult to answer new user's questions because they always leave out important information from their questions. However, judging by your question text, it sounds to me like you have set your collection property as the DataContext of your Window. If you want to data bind to your commands instead, then you'll need to change the DataContext to the object that contains both the collection and the commands... an instance of your view model:
DataContext = new YouViewModel();
Now that the DataContext is set to an instance of your view model, you can data bind to its properties as you showed us:
<Button Command="{Binding CancelCommand}" />
...
<ListBox ItemsSource="{Binding NotesCollection}" />
Ahhh, sorry I misunderstood - so your Button is inside the ListBox. In that case, you could try something like this:
<Button Command="{Binding DataContext.CancelCommand,
RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
This should reach out of the scope of the collection, looking in the DataContext of a Window, so if you have set the instance of your view model to the Window.DataContext, this should work.
I wantto postion control like this pic
I need Next and previous buttons to be as pic 1, but i get the following, and not able to solve this.
Please guide, XAML code:
<StackPanel Grid.Row="4">
<Grid x:Name="GridNavigation">
<Button x:Name="Gridprevbutton" Content="Previous" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="121,0,0,0"></Button>
<Button x:Name="Gridnextbutton" Content="Next" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="231 , 0, 0, 0"></Button>
<Button x:Name="Gridendexambuton" Content="End Exam" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0"></Button>
</Grid>
<TextBlock HorizontalAlignment="Right" Margin="0,5,10,0" TextDecorations="Underline">Contact Support</TextBlock>
</StackPanel>
(Edit) I end up doing this following #davisoa advise. and got it working.
Code behind
private void SetNavigation()
{
var img = Common.AddImageToContainer("images/lowerleftblock.png", GridNavigation, Common.ToDictionaryTLST("top", "left", "none"));
img.Margin = new Thickness(0,16,0,0);
Panel.SetZIndex(img, -1);
}
Give your image a top margin to bring it down by however much is needed.
E.g.
<Image x:Name="Lowerleftblock" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,20,0,0"></Image>
It looks to me like the Grid you are not showing above (the first StackPanel is in Grid.Row="4") is limiting the height of your Next and Previous buttons.
This example XAML shows the Question block lower than the buttons.
Changed Image to a StackPanel with a Label, since I don't have your image
Changed VerticalAlignment to Bottom, to ensure it floats on the bottom of the Grid
Gave the Grid a fixed Height to ensure the vertical layout is correct. You probably don't want to do this
<StackPanel Grid.Row="4">
<Grid x:Name="GridNavigation" Margin="0,0,0,0" Height="75">
<StackPanel x:Name="Lowerleftblock" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,0,0,0" Background="Green">
<Label>Question: 1 of 27</Label>
</StackPanel>
<Button x:Name="Gridprevbutton" Content="Previous" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="121,0,0,0"></Button>
<Button x:Name="Gridnextbutton" Content="Next" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="231 , 0, 0, 0"></Button>
<Button x:Name="Gridendexambuton" Content="End Exam" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0"></Button>
</Grid>
<TextBlock HorizontalAlignment="Right" Margin="0,5,10,0" TextDecorations="Underline">Contact Support</TextBlock>
</StackPanel>
This is how i am binding the Autocomplete Textbox:-
<sdk:AutoCompleteBox Grid.Column="1" Grid.Row="2" Height="28" HorizontalAlignment="Left" Margin="5,5,0,0" Name="autoCompleteBox" ItemsSource="{Binding List,Mode=TwoWay}" ValueMemberPath="Details" FilterMode="Contains" VerticalAlignment="Top" Width="400" SelectedItem="{Binding Path= SelectedFromList,Mode=TwoWay
<sdk:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Details}" VerticalAlignment="Center" Margin="10 0 0 0" />
</StackPanel>
</DataTemplate>
</sdk:AutoCompleteBox.ItemTemplate>
</sdk:AutoCompleteBox>
Problem is i am not able to Clear the previously searched data from the Autocompletetext box, and every time i search it show all the records that i searched previously.
Can anybody suggest how to clear previous records??
i don't know how to do this in ViewModel but in code behind in the event "Populating"
clear the selectedItem and Itemsource and bind it again and it will work,
var items = this.autoCompleteBoxSingle.ItemsSource;
this.autoCompleteBoxSingle.ItemsSource = null;
this.autoCompleteBoxSingle.SelectedItem = null;
this.autoCompleteBoxSingle.ItemsSource = items;
I am using a ImageButton as
<Button Width="80" Height="25"
VerticalAlignment="Top"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Margin="0,0,1.5,0"
Name="btnActivate"
Click="OnActivate">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="Shutdown.ico"
Width="12" Height="12"
Margin="0,0,5,0"/>
<TextBlock>Activate</TextBlock>
</StackPanel>
</Button>
I want to change the Content of button to 'Deactivate' when I click on it without changing the image. How can I do that? And also I need to some operations based on the content of button in my C# code.
You could just add a name to the TextBlock
<TextBlock Name="textBlock1">Activate</TextBlock>
and use it to modify the content in your OnActivate event handler
textBlock1.Text = "Deactivate";
I'm working on a Silverlight Polling control. My goal is to have a Button that contains other controls, so that when a user clicks on this combination, stuff happens.
Here's the basic XAML:
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource AnswerButton}">
<StackPanel Grid.Row="1" Grid.Column="0" Height="Auto" Width="Auto" Style="{StaticResource StackPnl}">
<TextBox Text="this is a text box" Style="{StaticResource Answer}" />
<ProgressBar Style="{StaticResource PollProgress}" />
</StackPanel>
</Button>
That works fine, but assume I don't have the StackPanel, etc, defined:
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource AnswerButton}">
</Button>
But that I want to add the StackPanel, TextBox, and ProgressBar at runtime.
Looking at just the first hurdle that I've run into, how do I dynamically add the StackPanel to the Button control?
Alternatively, if someone knows of a better way to do this...
var panel = new StackPanel();
Button.Content = panel;