How to add row style to ListBox ItemTemplate in silverlight - c#

I have problem in add alternate row style for ListBox.ItemTemplate
This is the way I code
<ListBox x:Name="NListBox" ItemsSource="{Binding NList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding SelectedItem,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource CommonListBoxStyle}" Loaded="NListBox_Loaded">
<ListBox.ItemTemplate >
<DataTemplate >
<Grid Margin="0" Width="1600"
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="2*" ></ColumnDefinition>
<ColumnDefinition Width="2*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="20" Loaded="TextBlock_Loaded" Grid.ColumnSpan="3" Text="{Binding H}" />
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="12" HorizontalAlignment="Right">Publish Date</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="3" FontSize="12" Text="{Binding PublishDate,StringFormat=\{0:dd.MM.yy\}}"
/>
<TextBlock Grid.Row="1" FontSize="15" TextWrapping="Wrap" Grid.ColumnSpan="3" Text="{Binding Description}"
Height="50" />
<TextBlock Grid.Row="2" Grid.Column="0" FontSize="12" Text="{Binding link}" />
<TextBlock Grid.Row="2" Grid.Column="1" FontSize="12" HorizontalAlignment="Right">Expiry Date</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="3" FontSize="12" Text="{Binding ExpiryDate,StringFormat=\{0:dd.MM.yy\}}"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

This the why I did this
.xml
<converters:RowStyleConverter x:Key="RowStyleConverter"/>
<ListBox>
<ListBox.ItemTemplate >
<DataTemplate >
<Grid Background="{Binding Converter={StaticResource RowStyleConverter}}"></Grid>
</DataTemplate >
</ListBox.ItemTemplate >
</ListBox>
C#
public class RowStyleConverter : IValueConverter
{
int counter = 0;
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (counter % 2 == 1)
{
return new SolidColorBrush(Color.FromArgb(255, 233, 252, 251));
}
else
{
return new SolidColorBrush(Color.FromArgb(255, 220, 239, 238));
}
counter++;
}
}

Related

Bind element to inner UserControl data context

As the title implies, I'm trying to bind an element to inner usercontrol data context, but it's a bit complicated.
First of all, here is a snippet of my xaml view:
<TabControl Grid.Row="0" Grid.Column="1" Margin="5" TabStripPlacement="Top"
Style="{StaticResource TabControlStyle}" FontSize="16">
<TabItem Header="Local Settings" IsEnabled="{Binding ElementName=localSettings, Path=IsEnabled}">
<tabViews:LocalSettingsView x:Name="localSettings" DataContext="{Binding TabsVM, Converter={StaticResource dictionaryToViewModel}, ConverterParameter={x:Static enums:TabsEnum.LocalSettings}}" />
</TabItem>
... more TabItems ...
</TabControl>
As you can see, I've tried (without any luck) to bind it with element name, but it didn't work as expected.
I'm getting this exception in output window:
System.Windows.Data Error: 40 : BindingExpression path error: 'IsEnabled' property not found on 'object' ''LocalSettingsView' (Name='localSettings')'. BindingExpression:Path=IsEnabled; DataItem='LocalSettingsView' (Name='localSettings'); target element is 'TabItem' (Name=''); target property is 'IsEnabled' (type 'Boolean')
Here are the relevant code sections:
Binded property
private Dictionary<string, ITabViewModel> _tabsVM;
public Dictionary<string, ITabViewModel> TabsVM
{
get
{
if (_tabsVM == null)
{
_tabsVM = new Dictionary<string, ITabViewModel>()
{
{ "Network", new NetworkViewModel() },
{ "Cru", new CRUViewModel() },
{ "LocalSettings", new LocalSettingsViewModel() },
{ "Connectivity", new ConnectivityViewModel() },
{ "Security", new SecurityViewModel() },
};
}
return _tabsVM;
}
}
Converter
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
Dictionary<string, ITabViewModel> _tabsVM = value as Dictionary<string, ITabViewModel>;
if (_tabsVM == null)
return null;
string param = Enum.GetName(typeof(TabsEnum), parameter);
ITabViewModel _selectedVM;
bool success = _tabsVM.TryGetValue(param, out _selectedVM);
if (success)
return _selectedVM;
else
return null;
}
and finally, TabsEnum
public enum TabsEnum
{
LocalSettings,
Network,
Connectivity,
Security,
Cru,
}
Edit
I'm adding the LocalSettingsView & it's ViewModel relevant part
<UserControl x:Class="ContentTemplateTest.Views.TabViews.LocalSettingsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ContentTemplateTest;component/Styles/Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<DockPanel>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Hospital Name" />
<TextBox x:Name="hospitalTextBox" Grid.Row="0" Grid.Column="1" Text="DEMO - 000000" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Full Address" />
<TextBox Grid.Row="1" Grid.Column="1" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Department" />
<TextBox Grid.Row="2" Grid.Column="1" />
<TextBlock Grid.Row="3" Grid.Column="0" Text="Date and Time" />
<TextBox Grid.Row="3" Grid.Column="1" Text="{Binding DateAndTime}" />
<TextBlock Grid.Row="4" Grid.Column="0" Text="Interface Language" />
<ComboBox Grid.Row="4" Grid.Column="1" ItemsSource="{Binding Languages}"
SelectedItem="{Binding SelectedInterfaceLang}"/>
<TextBlock Grid.Row="5" Grid.Column="0" Text="Manual Language" />
<ComboBox Grid.Row="5" Grid.Column="1" ItemsSource="{Binding Languages}"
SelectedItem="{Binding SelectedManualLang}"/>
<TextBlock Grid.Row="6" Grid.Column="0" Text="Units" />
<ComboBox Grid.Row="6" Grid.Column="1" ItemsSource="{Binding Units}"
SelectedItem="{Binding SelectedUnit}"/>
<TextBlock Grid.Row="7" Grid.Column="0" Text="Video Settings" />
<ComboBox Grid.Row="7" Grid.Column="1" ItemsSource="{Binding VideoSettings}"
SelectedItem="{Binding SelectedVideoFormat}"/>
<TextBlock Grid.Row="8" Grid.Column="0" Text="Keyboard Input Language" />
<ComboBox Grid.Row="8" Grid.Column="1" ItemsSource="{Binding Languages}"
SelectedItem="{Binding SelectedKeyboardLang}"/>
</Grid>
<Grid VerticalAlignment="Bottom" DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Width="100" Height="100" Margin="50">
<Image Source="../../src/Save.png" Width="40" Height="40" Margin="20" />
</Button>
<Button Grid.Column="1" Width="100" Height="100" Margin="50">
<Image Source="../../src/Cancel.png" Width="40" Height="40" Margin="20" />
</Button>
<Button Grid.Column="2" Width="100" Height="100" Margin="50">
<Image Source="../../src/Export.png" Width="40" Height="40" Margin="20" />
</Button>
</Grid>
</DockPanel>
and the relevant property:
public bool IsEnabled
{
get { return false; }
}
How can I achieve my goal?
Thanks!
Pretty simple solution.
Just move to DataContext to the TabItem
<TabItem Header="Local Settings" IsEnabled="{Binding IsEnabled}"
DataContext="{Binding TabsVM, Converter={StaticResource dictionaryToViewModel}, ConverterParameter={x:Static enums:TabsEnum.LocalSettings}}" >
<tabViews:LocalSettingsView />
</TabItem>

Grouped Listview windows-phone

I'm trying to to show a grouped Listview based on this class
private class EInfo
{
public double JD { get; set; }
public string Date { get; set; }
public string Time { get; set; }
public string Details { get; set; }
public string MoreDetails { get; set; }
public string Icon { get; set; }
}
private List<EInfo> MEphemeries = new List<EInfo>();
This is how I grouped and ordered all the elements in every group:
IEnumerable<IGrouping<string, EInfo>> query = MEphemeries.GroupBy(pet => pet.Details);
foreach (var group in query)
{
Debug.WriteLine("Group {0}", group.Key);
group.OrderBy(a => a.JD);
foreach (var user in group)
{
Debug.WriteLine(" {0}", user.Date);
}
}
listviewME.ItemsSource = query;
And here goes the XAML:
<SemanticZoom Grid.Row="1" Background="Black" x:Name="semanticZoom" >
<SemanticZoom.ZoomedInView>
<ListView x:Name="listviewME" IncrementalLoadingThreshold="15">
<!--<ListView.SemanticZoomOwner>
<SemanticZoom/>
</ListView.SemanticZoomOwner>-->
<ListView.Header>
<!-- table header-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="listviewMEHeader0" Width="140"/>
<ColumnDefinition x:Name="listviewMEHeader1" Width="60"/>
<ColumnDefinition x:Name="listviewMEHeader2" Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">
</Grid>
<Grid Grid.Column="1" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">
</Grid>
<Grid Grid.Column="2" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">
</Grid>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Black" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5">
<StackPanel>
<TextBlock Text="{Binding Date}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"/>
<TextBlock Text="{Binding Time}" Margin="5,0,5,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" FontSize="14" Foreground="{StaticResource LightGreyThemeColor}"/>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5">
<!--<Rectangle Height="25" Width="25" Margin="0" Fill="{StaticResource MoonThemeColor}" RadiusX="12.5" RadiusY="12.5" />
<Rectangle Height="35" Width="35" Margin="0" Stroke="{Binding Color}" StrokeThickness="2" RadiusX="17.5" RadiusY="17.75" />-->
<Image Height="30" Width="30" Margin="0" Source="{Binding Icon}" Stretch="Uniform" />
</Grid>
<Grid Grid.Column="2" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5" Width="{Binding ActualWidth, ElementName=listviewMEHeader2}">
<StackPanel>
<TextBlock Text="{Binding Details}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}" Foreground="{StaticResource VeryLightGreyThemeColor}"/>
<TextBlock Text="{Binding MoreDetails}" Margin="5,0,5,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" FontSize="14" Foreground="{StaticResource LightGreyThemeColor}"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Grid.Column="0" Grid.ColumnSpan="3" MinWidth="400" BorderThickness="2" BorderBrush="Blue" Background="AliceBlue" Margin="0,10,5,0" CornerRadius="1">
<TextBlock Foreground="White" Text="{Binding Key}"
Margin="10,2,2,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap"
FontWeight="SemiBold" FontSize="10" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView Margin="5" ItemsSource="{Binding query}" Background="White">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="99" Margin="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="{StaticResource MediumDarkGreyThemeColor}" Width="200" Height="111">
<Grid>
<TextBlock Text="{Binding Group.Key}" Style="{ThemeResource SubheaderTextBlockStyle}" />
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
The question is that all the info is grouped Ok, every group with its key, its list of elements correctly ordered by date, but the listview doesn't shows any info. It only some empty blocks (the number of block is the same to the number of groups).
What is the problem? How I can fix this?
This is what I get:
This is what I want to achieve:
Thank you in advance!
Some stuff I see that might fix your problems:
1) Change your private class EInfo to public
2) Your first ListView does not have ItemsSource set while your second LiewView has it set to ItemsSource="{Binding query}"
3) You can group your ListView and GridView nicely by using a CollectionViewSource see here : CollectionViewSource example
4) Or you can do it manually by Grouping it into an AlphaKeyGroup, I have a working example here : AlphaKeyGroup
Last idea, is to check the output of your GroupBy code vs the CollectionViewSource and AlphaKeyGroup in the debugger to see if they match up.

Out of memory exception while using <ScrollViewer> with multiple ListViews in it

I have a usercontrol with 2 ListViews in it. One for holding a list of predefined categories and one for the list with all the categories in it.
When i place the ListViews inside a <Grid> than everything works perfect.
The working xaml code (with Grid):
<Grid Style="{StaticResource ResourceKey=ContentStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView x:Name="lstPredefinedCategories" Grid.Row="0" ItemsSource="{Binding PredefinedCategories}" SelectionMode="Multiple" Margin="20">
<ListView.Header>
<StackPanel>
<TextBlock Text="Voorgestelde categorieën" Style="{StaticResource TextBlockStyle}" FontWeight="SemiBold" Foreground="Black" />
<Rectangle Style="{StaticResource DividerStyle}" Fill="Black"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Left" TextWrapping="Wrap" Width="300" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="20,0">
<TextBlock Text="Alle categorieën" Style="{StaticResource TextBlockStyle}" FontWeight="SemiBold" Foreground="Black" />
<Rectangle Style="{StaticResource DividerStyle}" Fill="Black"/>
</StackPanel>
<TextBox x:Name="txtSearch" PlaceholderText="Zoek categorie" Grid.Row="1" Style="{StaticResource SearchboxStyle}" Margin="20,0" TextChanged="txtSearch_TextChanged" />
<Rectangle Grid.Row="2" Style="{StaticResource DividerStyle}" Margin="20, 0" />
<ListView x:Name="lstCategories" Grid.Row="3" Margin="20,10,20,0" ItemsSource="{Binding Categories}" SelectionMode="Multiple" SelectionChanged="lstCategories_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Left" TextWrapping="Wrap" Width="300" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Rectangle Grid.Row="4" Style="{StaticResource DividerStyle}" Margin="20, 0" />
<Grid Grid.Row="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btnAnnuleren" Grid.Column="0" Content="Annuleren" Style="{StaticResource ButtonAnnulerenStyle}" Click="btnAnnuleren_Click"/>
<Rectangle Grid.Column="1" Fill="#A9A9A9" Width="0.5" Margin="10,0" />
<Button x:Name="btnSelecteren" Grid.Column="2" Content="Selecteren" Style="{StaticResource ButtonAnnulerenStyle}" Click="btnSelecteren_Click"/>
</Grid>
</Grid>
</Grid>
The only problem with this is that I dont get the UI behaviour that I want. If I use a grid then only the red border is scrollable (because of the ListView). But what I need is that the entire green border is scrollable.
So I want to put everything in a <ScrollViewer><StackPanel></StackPanel></ScrollViewer>.
But when I do so, I occasionally get an out-of-memory exception (sometimes the apps just freezes and close without an exception).
Here is my not working xaml with the <ScrollViewer>:
<ScrollViewer>
<StackPanel>
<ListView x:Name="lstPredefinedCategories" ItemsSource="{Binding PredefinedCategories}" SelectionMode="Multiple" Margin="20">
<ListView.Header>
<StackPanel>
<TextBlock Text="Voorgestelde categorieën" Style="{StaticResource TextBlockStyle}" FontWeight="SemiBold" Foreground="Black" />
<Rectangle Style="{StaticResource DividerStyle}" Fill="Black"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Left" TextWrapping="Wrap" Width="300" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="20,0">
<TextBlock Text="Alle categorieën" Style="{StaticResource TextBlockStyle}" FontWeight="SemiBold" Foreground="Black" />
<Rectangle Style="{StaticResource DividerStyle}" Fill="Black"/>
</StackPanel>
<TextBox x:Name="txtSearch" PlaceholderText="Zoek categorie" Grid.Row="1" Style="{StaticResource SearchboxStyle}" Margin="20,0" TextChanged="txtSearch_TextChanged" />
<Rectangle Grid.Row="2" Style="{StaticResource DividerStyle}" Margin="20, 0" />
<ListView x:Name="lstCategories" Grid.Row="3" Margin="20,10,20,0" ItemsSource="{Binding Categories}" SelectionMode="Multiple" SelectionChanged="lstCategories_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Left" TextWrapping="Wrap" Width="300" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Rectangle Grid.Row="4" Style="{StaticResource DividerStyle}" Margin="20, 0" />
<Grid Grid.Row="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btnAnnuleren" Grid.Column="0" Content="Annuleren" Style="{StaticResource ButtonAnnulerenStyle}" Click="btnAnnuleren_Click"/>
<Rectangle Grid.Column="1" Fill="#A9A9A9" Width="0.5" Margin="10,0" />
<Button x:Name="btnSelecteren" Grid.Column="2" Content="Selecteren" Style="{StaticResource ButtonAnnulerenStyle}" Click="btnSelecteren_Click"/>
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
Any thoughts on why my app is freezing or get an OOM-exception?
Update
It comes because in the 2nd ListView they are too much objects loaded. So I'm gonna try to fix it with ISupportIncrementalLoading.
Or is there an other way?
The solution was to use virtualization (ISupportIncrementalLoading) like suggested in the comments.
Here you can find my implementation class of ISupportIncrementalLoading:
public class StringKeyValueIncrementalCollection : ObservableCollection<StringKeyValue>, ISupportIncrementalLoading
{
private List<StringKeyValue> allCategories;
private int lastItem = 1;
public StringKeyValueIncrementalCollection(List<StringKeyValue> categories)
{
this.allCategories = categories;
}
public bool HasMoreItems
{
get
{
if (lastItem == allCategories.Count)
{
return false;
}
else
{
return true;
}
}
}
public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
{
CoreDispatcher coreDispatcher = Window.Current.Dispatcher;
return Task.Run<LoadMoreItemsResult>(async () =>
{
List<StringKeyValue> items = new List<StringKeyValue>();
for (int i = 0; i < count; i++)
{
items.Add(allCategories[i]);
lastItem++;
Debug.WriteLine(lastItem);
if (lastItem == allCategories.Count)
{
break;
}
}
await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
foreach (StringKeyValue item in items)
{
this.Add(item);
}
});
return new LoadMoreItemsResult() { Count = count };
}).AsAsyncOperation<LoadMoreItemsResult>();
}
}
And then my code in the ViewModel. As you can see, I use the StringKeyValueIncrementalCollection instead of a regular List<object>:
private StringKeyValueIncrementalCollection categories;
private StringKeyValueIncrementalCollection allCategories;
public StringKeyValueIncrementalCollection Categories
{
get { return categories; }
set
{
filteredCategories = value;
RaisePropertyChanged("Categories");
}
}
public async void LoadCategories()
{
List<StringKeyValue> temp = await this.openVlaanderenService.GetCategoriesData();
allCategories = new StringKeyValueIncrementalCollection(temp);
Categories = allCategories;
}
The only problem that you than have is that the ScollViewer will allow it's content to fill as much space as it wants, so the data just will keep loading. To fix that I did what was suggested in ISupportIncrementalLoading inside ScrollViewer not supported?
So I added a SizeChanged="ScrollViewer_SizeChanged" event to my ScrollViewer and in code behind set the size of the ListView based on the viewport size properties of the ScrollViewer:
private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
{
lstCategories.Height = scrollViewer.ViewportHeight;
}

Bind ItemsSource to Column of ComboBoxes

As per title. The column is in a DataTemplate.
This is what I have currently:
var test = FindChildControl<ComboBox>(this, "PrintCode") as ComboBox;
test.ItemsSource = listPrintCode;
MessageBox.Show(test.Items.Count.ToString());
FindChildControl method:
private DependencyObject FindChildControl<T>(DependencyObject control, string ctrlName)
{
int childNumber = VisualTreeHelper.GetChildrenCount(control);
for (int i = 0; i < childNumber; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(control, i);
var fe = child as FrameworkElement;
// Not a framework element or is null
if (fe == null) return null;
if (child is T && fe.Name == ctrlName)
{
// Found the control so return
return child;
}
DependencyObject nextLevel = FindChildControl<T>(child, ctrlName);
if (nextLevel != null)
return nextLevel;
}
return null;
}
XAML - Template
<DataTemplate x:Key="lbCommsItemSetTemplate">
<Grid Margin="0" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" />
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="Blue" Margin="40,0,0,0"
Text="{Binding CommonDesc}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Serial:" Margin="0,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="Blue" Margin="35,0,0,0"
Text="{Binding Serial}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="lbIssueTemplate">
<Grid Margin="0" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" />
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="Blue" Margin="50,0,0,0"
Text="{Binding CommonDesc}" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="Qty:" Margin="10,0,0,0"/>
<TextBox Grid.Row="0" Grid.Column="1" Foreground="Blue" Margin="35,0,0,0"
Text="{Binding LoanQty}" PreviewTextInput="UIElement_OnPreviewTextInput" MaxLength="4"
GotKeyboardFocus="UIElement_OnGotKeyboardFocus" MaxLines="1"/>
<ComboBox x:Name="PrintCode" Grid.Row="0" Grid.Column="2" ItemsSource="{Binding}"
SelectedValuePath="PrintCode" DisplayMemberPath="PrintCode"/>
<CheckBox Grid.Row="0" Grid.Column="3" IsChecked="{Binding PrintShortSerial}"/>
</Grid>
</DataTemplate>
XAML - ListBox that implements the Template
<telerik:RadListBox Grid.Row="0" Grid.Column="2" Margin="0, 5, 5, 5"
x:Name="listBoxIssue" HorizontalAlignment="Left" VerticalAlignment="Top"
Height="690" Width="793"
ItemTemplate="{StaticResource lbIssueTemplate}" ItemsSource="{Binding}"
SelectionMode="Multiple" Drop="ListBoxIssue_OnDrop"/>
The message box is just simply to confirm that 'listPrintCode' and 'FindChildControl' is working as intended. But the ComboBox didn't display anything, even if it's just 1 ComboBox. If I apply the codes to a normal ComboBox not part of the template, it's all fine. I think there's an obvious flaw in my code, which is that there's nothing that seems to apply to all ComboBoxes in the column. So my question is, how do I bind my ItemsSource as the column of the comboboxes?
Note: The number of rows (ComboBoxes) are not fixed.

Apply ValueConverter by code to LongListSelector

I have PivotPage with some PivotItems each with an own LongListSelector:
<phone:PivotItem x:Name="pivotitem1" Header="Headline 1">
... same like in pivotitem2 ...
</phone:PivotItem>
<phone:PivotItem x:Name="pivotitem2" Header="Headline 2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<phone:LongListSelector x:Name="lst2" Margin="12,0,0,0" ItemTemplate="{StaticResource myLocationsListTemplate}" ItemsSource="{Binding Items}">
</phone:LongListSelector>
</Grid>
</phone:PivotItem>
<phone:PivotItem x:Name="pivotitem3" Header="Headline 3">
... same like in pivotitem2 ...
</phone:PivotItem>
All LongListSelector are using same DataTemplate, so I declared it globally as StaticRessource.
<DataTemplate x:Name="myLocationsListTemplate">
<Button Click="btn_ShowLocationDetails_Click" Tag="{Binding ID}" Style="{StaticResource mBlankButton}" Margin="1,0,-1,0">
<StackPanel Margin="0,0,0,15" >
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="{Binding LastUploadAgo}" TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</Button>
</DataTemplate>
In in OnNavigateTo I give to a corresponding model. I apply the model by code :
pivotitem1.DataContext = ...
pivotitem2.DataContext = App.ViewSurroundingsData;
pivotitem3.DataContext = ...
In App.ViewSourroundingsData is my ObservableCollection globally stored.
The collection contains a list of object with a lot of properties. One specific property is an integer: imgcnt - it holds the amount of images.
Now I want to make all list entries invisible when imgcnt is 0.
I researched, that I could use a ValuesConverter. But I don´t know how to code this with a depedency to my integer value in the class property. I can´t extend the solution found on Updating IValueConverter through code.
I don´t know how to make a whole list entry invisible, when the property imgcnt is 0.
And I don´t know how to apply the converter by code (in OnNavigateTo) only to my ItemTemplate for pivotitem2.
Can anyone help?
UPDATE:
I did following with no success (all entries are not shown):
pivotitem1.DataContext = App.ViewSurroundingsData;
Binding mBinding = new Binding();
mBinding.Source = App.ViewSurroundingsData;
mBinding.Converter = new IntegerToVisibilityConverter();
lst2.SetBinding(LongListSelector.ItemsSourceProperty, mBinding);
And
public sealed class IntegerToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
var item = (ViewModels.ViewModel_Surroundings)value;
if (item.imgcnt == 0)
{
return Visibility.Collapsed;
}
else
{
return Visibility.Visible;
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo language)
{
return value is Visibility && (Visibility)value == Visibility.Visible;
}
Can't you just bind the imgcnt to the Visibility of the Button like this?
<Button Click="btn_ShowLocationDetails_Click" Tag="{Binding ID}" Style="{StaticResource mBlankButton}" Margin="1,0,-1,0"
Visibility="{Binding imgcnt, Converter={StaticResource IntegerToVisibilityConverter}}">
And then in your converter:
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
return (int)value == 0 ? Visibility.Collapsed : Visibility.Visible;
}
Or am I missing something here? ;-)

Categories

Resources