I would like to add a preloader to a ListBox, I already added a preloader to the whole pivot control, but I only show it for one listbox (I have a listbox for each pivot page) I wish to create separate preloaders for each listbox, has any one done this?
I currently have a preloader control, showing the loading text and progress bar
Is there any way I can attach a progress bar to the listbox, and show it until the data is loaded from the webservice (For each different listbox)?
This is my current preloader:
code preview of my list in xaml
<telerikPrimitives:RadDataBoundListBox HorizontalAlignment="Left" Margin="4,0,0,0" Name="listNearbyBusinesses" IsAsyncBalanceEnabled="True" AsyncBalanceMode="FillViewportFirst" SelectionChanged="listNearbyBusinesses_SelectionChanged" Height="535" VerticalAlignment="Top" Grid.RowSpan="2" Grid.ColumnSpan="2">
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="100" Height="100" x:Name="m_Image" Source="{Binding Image}"/>
<StackPanel>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
<TextBlock Text="{Binding Type}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" />
<telerikInput:RadRating IsReadOnly="True" Value="{Binding Rating}" Margin="12" ItemShapeHeight="20" ItemShapeWidth="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>
Related
I have a listbox which binds to an observable collection of a custom type which displays each item through my data template:
<ListBox x:Name="ListBox" Style="{StaticResource CustomListBox}" ItemsSource="{Binding HandStats}" Height="410" Width="150" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding HoleCards[0].CardParts.Value}" Margin="2"/>
<Image Source="{Binding HoleCards[0].SuitImagePath}" Width="10" Height="10" Margin="2"/>
<TextBlock Text="{Binding HoleCards[1].CardParts.Value}" Margin="2"/>
<Image Source="{Binding HoleCards[1].SuitImagePath}" Width="10" Height="10" Margin="2"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Runs:" Margin="2"/>
<TextBlock Text="{Binding NumberOfRuns}" Margin="2"/>
<TextBlock Text="Players:" Margin="2"/>
<TextBlock Text="{Binding NumberOfPlayers}" Margin="2"/>
</StackPanel>
<StackPanel.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding Path=DataContext.PopulateReport, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
CommandParameter="{Binding ElementName=ListBox, Path=SelectedItem}"/>
</StackPanel.InputBindings>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Image of my listbox:
http://imgur.com/a/QGz8z
Now ideally when I click anywhere in the stack panel for each item, the item will be selected and the command will be fired. But my problem is that the item selection and the command firing is not working as it should.
The item will only become selected if I click in between the text blocks or in the empty space to the right of the text blocks, but the command will not be fired. The command will only fire once I have firstly selected the item, and then click again onto one of the text blocks or one of the images.
I'm still quite new to WPF so if I'm not making much sense please let me know, thanks in advance :)
So instead of using input bindings I decided to use a different method. I created a property in my vm and bound this to the selected item of my list. So now every time I select a new item (which works perfectly now) the property is updated in my vm. Simple!
Try to set the Background property of the StackPanel to Transparent:
<StackPanel Orientation="Vertical" Background="Transparent">
...
If it doesn't have a Background the click events won't be raised as expected.
I am trying to view my data from the windows phone. The data amount will depend on how many data there is on that specific date. For example 1/March/1010 has 10 informations, I should be able to scroll down to view the others. When I have scrolled, i bounced backed up after i released my finger from the screen. What have I done wrong here. Below is my XAML code:
<!--Pivot Control-->
<phone:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<phone:PivotItem Header="today">
<StackPanel>
<toolkit:DatePicker x:Name="NowDate"
HorizontalAlignment="Left"
Width="456"
Background="DarkBlue"
ValueStringFormat="{}{0:D}"
Foreground="White"
BorderBrush="DarkBlue"
/>
<TextBlock Name="NoData"
HorizontalAlignment="Left"
Text="No Information Available"
Margin="18,0,0,0"
Visibility="Collapsed"
/>
<!--Double line list with text wrapping-->
<ScrollViewer VerticalScrollBarVisibility="Visible">
<phone:LongListSelector x:Name="MLongListSelector"
Margin="0,0,-12,0"
SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding Title}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Description}"
Name="Description"
TextTrimming="WordEllipsis"
MaxHeight="84"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextSmallStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</ScrollViewer>
</StackPanel>
</phone:PivotItem>
You have to set the height of the ScrollViewer to be less than that of the Parent Control(In your case StackPanel). If the ScrollViewer is larger than it's child, the child will always bounce back to it's original position.
How do I update a nested ListBox in my viewmodel (Mvvm Light) without page navigation after the initial view has been displayed. Currently I am doing a re-entrant page navigation using a changing querystring - there must be a better way?
RaisePropertyChanged is having no effect although I can see the data is populated with the correct data when the callback from the soap request triggered via OpenCallingPoints has fired.
The grid I am trying to populate with soap data is CallingPointsGrid
Short version of the code...
<ListBox x:Name="ResultsListBox" Margin="0" VerticalAlignment="Top" ItemsSource="{Binding JourneyLegs, Mode=TwoWay}" Background="{StaticResource BackgroundWhiteGradientBrush}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="StationItem" Orientation="Vertical" VerticalAlignment="Top" background="{Binding id, Converter={StaticResource myconverter}}">
<Grid Name="CallingPointsGrid" Margin="15,10,55,10" Visibility="{Binding JourneyCallingPoints, Converter={StaticResource CallingPointsVisibilityConverter}}" Background="{StaticResource BackgroundWhiteGradientBrush}">
<ListBox Grid.Row="1" Name="CallingPointsListBox" DataContext="{Binding}" VerticalAlignment="Top" ItemsSource="{Binding JourneyCallingPoints, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<TextBlock Margin="0" VerticalAlignment="Center" HorizontalAlignment="Left" Width="210" x:Name="Destination" Foreground="Black" Text="{Binding stationName}" />
<TextBlock Margin="5,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Left" Width="75" x:Name="ScheduledDepartureTime" FontWeight="Bold" Foreground="{StaticResource BackgroundBlueLightSolidColor}" Text="{Binding timetable.scheduledTimes.arrival, StringFormat=\{0:HH:mm\}}" />
<TextBlock Margin="5,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Left" Width="75" x:Name="ScheduledArrivalTime" FontWeight="Bold" Foreground="{StaticResource BackgroundBlueLightSolidColor}" Text="{Binding timetable.scheduledTimes.departure, StringFormat=\{0:HH:mm\}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger SourceName="ResultsListBox" EventName="Tap">
<i:EventTrigger.Actions>
<local:OpenCallingPoints />
</i:EventTrigger.Actions>
</i:EventTrigger>
</i:Interaction.Triggers>
You might look at this:
http://matthamilton.net/madprops-mvvmlight-screenconductor
I was going to suggest you look at Caliburn Micro and was searching around to see if Mvvm-Light had something similar. That article talks about that.
That's one of the things I really like about CM, when you inherit your ViewModel from Screen you automatically get OnInitialize, OnActivate, OnDeactive, OnViewLoaded, and OnViewReady methods you can override. So in this case you'd stick that logic in OnActivate.
On windows phone CM will also auto parse out the query string parameters and populate a property on your VM with them.
It looks like the screen conductor allows you to do similar with mvvm-light.
I have a two pages say Main.xaml and Details.xaml.Each page has a ListBox and I am setting each of it to a collection in ViewModel(Same collection).The strange thing is that when i select an item in Details page it calls the SelectionChanged event handler on Main page and Details page.Is this a bug?
I have solved the problem by unhooking SelectionChanged eventhandler in OnNavigatedFrom() method.
EDIT
In Main.Xaml I have something like below:
<ListBox Name="MainDataListBox" Margin="8,113,8,8" ItemsSource="{Binding DataList}" SelectionChanged="MainDataListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="3" BorderBrush="#A5FFFFFF" Width="80" Margin="0,20,0,20" Height="60">
<Image Source="{Binding ImageUrl, Mode=OneWay}" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="80" Height="60" Stretch="Fill" />
</Border>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="40" FontWeight="Normal" VerticalAlignment="Center" Margin="30,0,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In Details.xaml also I have same kind of ListBox:
<ListBox Name="DetailDataListBox" Margin="8,113,8,8" ItemsSource="{Binding DataList}" SelectionChanged="DetailDataListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="3" BorderBrush="#A5FFFFFF" Width="80" Margin="0,20,0,20" Height="60">
<Image Source="{Binding ImageUrl, Mode=OneWay}" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="80" Height="60" Stretch="Fill" />
</Border>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="40" FontWeight="Normal" VerticalAlignment="Center" Margin="30,0,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Both of the Pages Main and Details have seperate EvenHandlers MainDataListBox_SelectionChanged and DetailDataListBox_SelectionChanged.
The problem is when i select an Item in Details Page MainDataListBox_SelectionChanged is called first and then DetailDataListBox_SelectionChanged.
Also my viewmodel is a static one in App.cs and I am setting the data context of both these pages to same viewmodel.
Thanks and Regards
vaysage
As both listsboxes were bound to the same dataset a change in the selected time in one list would have affected the other.
Obviosuly you're found a work around but I'd recommend having a unique view model for each page. If the page is just a different way of displaying the same data use a single page and alter the display as appropriate. (Creating your own visual states may be a good way to do this.)
I'm having a little trouble in silverlight with a databound ListBox containing databound TextBox elements. The items display correctly in the list and the TextBox is populated correctly but I can't get focus on the TextBox in the list. If I hover over the edges of the TextBox it highlights but it won't let me click into it to edit the text. Any ideas?
My XAML looks like this:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="LayoutRoot" Background="White">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="154,25,0,0" Name="txtAltText" VerticalAlignment="Top" Width="239" Text="{Binding Alt}" />
<dataInput:Label Height="19" HorizontalAlignment="Left" Margin="154,6,0,0" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I swapped the content for this and it now works, I think it was having an issue with the Grid container:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" Margin="5" />
<StackPanel>
<dataInput:Label Height="19" HorizontalAlignment="Left" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
<TextBox Height="23" HorizontalAlignment="Stretch" Name="txtAltText" VerticalAlignment="Top" Text="{Binding Alt}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>