I have implemented below mentioned code in WPF in that I have implemented virtualization of lazy loading but it's not work when my inner collection have a 1000 of record then it will take much time to load on screen.
<ListBox x:Name="Mappingcontrol" Grid.Row="1"
DataContext="{Binding ElementName=Grids,Path=DataContext}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
ItemsSource="{Binding Path=MultiMappingCollectionList, Mode=TwoWay}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
BorderThickness="0" BorderBrush="Transparent"
Background="Transparent"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource TransparentListBoxStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Padding="0,10,0,10" BorderThickness="0,0,0,1"
BorderBrush="{StaticResource Gray5SolidBrush}">
<Grid x:Name="Gridmain" Margin="4,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="default" Width="0.5*" SharedSizeGroup="default" />
<ColumnDefinition x:Name="atrioValue" Width="1*"
SharedSizeGroup="atrioValue" />
<ColumnDefinition x:Name="externalValue" Width="2*"
SharedSizeGroup="externalValue" />
</Grid.ColumnDefinitions>
<ToggleButton VerticalAlignment="Top"
HorizontalAlignment="Left"
Style="{DynamicResource ToggleButtonStyle}"
Margin="30,12,10,10" IsTabStop="False" Width="25"
Height="25"
IsChecked="{Binding IsDefault, Mode=TwoWay}">
<TextBlock Grid.Column="1" Margin="0,15,10,10" HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="{Binding Path=Description}"
Style="{StaticResource ContentDataText}"
Name="txtDescription" />
<ListBox x:Name="GroupListBox" Grid.Column="2"
ItemsSource="{Binding Path=MultiMapping,Mode=TwoWay}"
HorizontalContentAlignment="Stretch"
BorderThickness="0"
BorderBrush="Transparent"
Background="Transparent"
VerticalContentAlignment="Stretch"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
VirtualizingStackPanel.CacheLength="2,3"
VirtualizingStackPanel.CacheLengthUnit="Page"
ItemContainerStyle="{StaticResource TransparentListBoxStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" CanVerticallyScroll="True" Height="200">
<telerik:RadWatermarkTextBox x:Name="ExternalValueTextBox"
HorizontalAlignment="Left"
TabIndex="100"
KeyboardNavigation.TabIndex="100"
IsTabStop="True"
Width="250"
MaxLength="35"
TextWrapping="Wrap"
Validation.ErrorTemplate="{DynamicResource CustomErrorTemplate}"
Text="{Binding Path=ExternalValue, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
PreviewTextInput="ExternalValueTextBox_OnPreviewTextInput"
Style="{DynamicResource RadWatermarkTextBoxDefault}"
Visibility="{Binding Path=ExternalValue,Converter={StaticResource StarVisibilityConverter}}"
Margin="0,5,0,0">
</telerik:RadWatermarkTextBox>
<Button x:Name="DeleteButton" Background="Transparent"
BorderThickness="0"
BorderBrush="Transparent"
CommandParameter="{Binding}"
Command="{Binding DataContext.RemoveGrouplistCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Visibility="{Binding Path=RemoveButtonVisibility,Converter={StaticResource BooleanHiddenVisibleConverter},Mode=TwoWay}"
Margin="15,5,15,0"
Style="{DynamicResource ButtonInvisibleNoColorEffects}">
<Button.Content>
<Rectangle Style="{StaticResource SmallCloseIcon}" />
</Button.Content>
</Button>
<Grid x:Name="AddGrid"
Visibility="{Binding Path=AddbuttonVisibility,Converter={StaticResource BooleanVisibilityConverter}}">
<controls:ActionImageButton x:Name="AddButton"
Content="Add Another"
DataContext="{Binding ElementName=Root,Path=DataContext}"
CommandParameter="{Binding ElementName=txtDescription,Path=Text}"
Command="{Binding AddGrouplistCommand}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
IsEnabled="{Binding ElementName=ExternalValueTextBox,Path=Text,Converter={StaticResource StarVisibilityConverter},ConverterParameter=CanAdd}"
Margin="5,5,30,5"
Style="{StaticResource ActionImageButtonMedium}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It would be great help if anyone can light on me what's I am doing wrong in it
Thanks in advance.
Related
I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>
I have a listBox with a checkbox I want to manage the alignment through setting the vertical alignment.
I have seen several solution here e.g. set verticalContentAlignment or verticalAlignment to top but that didn't work.
I've also seen some setting a style but couldn't manage to make it done.
What I'd like is to know WHY the ONLY element is down there. I can't understand why it's stuck in the middle.
Here's my code:
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.8,0" >
<CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20" Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
</ListBox>
thanx for any help
Patrick
--- EDIT ---
As requested by Frisbee here is the complete xaml. Sorry for its length:
<Base:WindowViewBase x:Class="EasyRun.Views.MainView.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:Base="clr-namespace:Cannoli.Base;assembly=Cannoli"
xmlns:design="clr-namespace:EasyRun.Views.MainView.Design"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:CannoliBorderlessWindow="clr-namespace:CannoliBorderlessWindow;assembly=Cannoli.BorderlessWindow"
d:DesignWidth="212.32" d:DesignHeight="109.92"
Title="EASY RUN 2.0" Height="600" Width="900" MinWidth="500" FontFamily="/EasyRun2.0;component/Resources/Fonts/#FontAwesome" Icon="/EasyRun2.0;component/Resources/Images/Lightning.png"
>
<d:WindowViewBase.DataContext>
<design:DesignMainViewModel />
</d:WindowViewBase.DataContext>
<i:Interaction.Behaviors>
<CannoliBorderlessWindow:CannoliBorderlessWindowBehavior/>
</i:Interaction.Behaviors>
<!-- RISORSE GLOBALI: VARIABILI -->
<Window.Resources>
<System:Double x:Key="BUTTON_HEIGHT">50</System:Double>
<System:Double x:Key="BUTTON_FONTSIZE">20</System:Double>
</Window.Resources>
<Grid x:Name="MainGrid">
<Grid.Background>
<ImageBrush ImageSource="/EasyRun2.0;component/Resources/Images/gradientWallpaper.jpg"/>
</Grid.Background>
<TextBlock Text="{Binding WelcomeMessage}" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Margin="428,128,99.6,228"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom" Margin="0,0,0,20">
</StackPanel>
<TabControl TabStripPlacement="Left" Margin="0,0,-0.4,0" Background="{x:Null}">
<!-- +++++++++++++ TAB1 ++++++++++++ -->
<TabItem Name="tabItem1" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" VerticalAlignment="Top" >
<TabItem.Header>
<StackPanel>
<TextBlock HorizontalAlignment="Center" Text=""/>
<TextBlock Name="tbTab1" HorizontalAlignment="Center" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab1" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10.4" >
<ListBox x:Name="lbButtons1" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" />
</Border>
<Border x:Name="Border2Tab1" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,9.2,10" />
</Grid>
</TabItem>
<!-- +++++++++++++ TAB2 ++++++++++++ -->
<TabItem Name="tabItem2" HorizontalAlignment="Center" Height="80" FontSize="50">
<TabItem.Header>
<StackPanel>
<TextBlock Text=""/>
<TextBlock Name="tbTab2" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<TabItem.Background>
<ImageBrush/>
</TabItem.Background>
</TabItem>
<!-- +++++++++++++ TAB3 ++++++++++++ -->
<TabItem Name="tabItem3" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" >
<TabItem.Header>
<StackPanel>
<TextBlock Text="" HorizontalAlignment="Center" />
<TextBlock Name="tbTab3" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab3" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10" >
<ListBox x:Name="lbButtons3" FontSize="{StaticResource BUTTON_FONTSIZE}" HorizontalContentAlignment="Stretch" Background="{x:Null}" BorderBrush="{x:Null}" >
<Button Name="bt1Tab3" Background="{x:Null}" Content="1" Click="Button_Click" />
<Button Name="bt2Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="2" Click="Button_Click"/>
<Button Name="bt3Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="3" Click="Button_Click"/>
<Button Name="bt4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="4" Click="Button_Click"/>
<Button Name="bt5Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="5" Click="Button_Click"/>
<Button Name="bt6Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="6" Click="Button_Click"/>
<Button Name="bt7Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="7" Click="Button_Click"/>
<Button Name="bt8Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="8" Click="Button_Click"/>
</ListBox>
</Border>
<Border x:Name="Border2Tab3" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,10,10" >
<StackPanel >
<ListBox x:Name="lb1Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbLanguage" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="1"><Run Text="Language"/></TextBlock>
<ComboBox x:Name="cmbLanguages" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Center" Width="246" Height="35" DropDownClosed="cmbLanguages_DropDownClosed"/>
</StackPanel>
<CheckBox x:Name="cbTouchScreen" Margin="20" Content="Use touch screen" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
<CheckBox x:Name="cbEnableImages" Margin="20" Content="Enable Images" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel Name="spImageDimension" Orientation="Horizontal">
<TextBlock x:Name="lbImageDimension" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center"><Run Text="Image dimension"/></TextBlock>
<ComboBox x:Name="cmbImageDimension" Margin="20" Text="250 px" HorizontalAlignment="Left" DropDownClosed="cmbImageDimension_DropDownClosed" VerticalAlignment="Center" Width="246" Height="35" IsEditable="True">
<TextBlock ><Run Text="50 px"/></TextBlock>
<TextBlock ><Run Text="100 px"/></TextBlock>
<TextBlock ><Run Text="150 px"/></TextBlock>
<TextBlock ><Run Text="200 px"/></TextBlock>
<TextBlock ><Run Text="250 px"/></TextBlock>
</ComboBox>
</StackPanel>
</ListBox>
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.8,0" >
<CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20" Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
</ListBox>
<ListBox x:Name="lb3Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" />
<ListBox x:Name="lb4Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb5Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb6Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb7Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb8Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
</StackPanel>
</Border>
</Grid>
</TabItem>
</TabControl>
</Grid>
You need to align the ListBox
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
If that does not work then post more of your XAML
So the problem was related with the fact that there are several listBox one on top of the other. I thought that making them hidden was enough but when I painted the second listBox in black I saw that it was not starting from the top (see image).
So the solution was to set Visibility = Collapsed for all the listbox that are not in use.
Thanks to kirotab for putting me on the right path. Not sure if I can vote your comment.
<Models:VariableSizedGridView x:Name="SalesGridview" ItemsSource="{Binding SalesData}" Padding="50,10,0,1000" SelectionChanged="On_selectionChanged" ItemContainerStyle="{StaticResource SalesGridviewitemcustomStyle}" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Models:VariableSizedGridView.ItemTemplate>
<DataTemplate>
<callisto:LiveTile>
<callisto:LiveTile.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.Background>
<SolidColorBrush Color="{Binding Background}"></SolidColorBrush>
</Grid.Background>
<Button Content="" FontFamily="Segoe UI Symbol" x:Name="flyoutcancel" Command="{Binding DeleteCommand}" Style="{StaticResource CustomSettingsButtonStyle}">
<Button.Flyout>
<Flyout x:Name="EditFlyout" Models:FlyoutHelpers.IsOpen="{Binding IsFlyoutOpen, Mode=TwoWay}" Models:FlyoutHelpers.Parent="{Binding ElementName=flyoutcancel}" Placement="Bottom">
<Grid Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Left" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<Button Content="" Grid.Row="0" Foreground="White" Command="{Binding DataContext.CancelCommand, ElementName=SalesGridview}" CommandParameter="{Binding }" Style="{StaticResource CustomCancelPopupButtonStyle}" ></Button>
<StackPanel Width="165" Height="200" Grid.Row="1" Background="#334157">
<Button HorizontalAlignment="Left" Height="Auto" Margin="10,10,0,10" Style="{StaticResource CustomCancelPopupButtonStyle}" >
<Button.Content>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
<TextBlock Text="" FontSize="16" VerticalAlignment="Center" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
<TextBlock Text="Widget Settings" Margin="10,3,0,0" FontSize="14" VerticalAlignment="Center" FontFamily="Segeo UI Semibold" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Button HorizontalAlignment="Left" Margin="10,0,0,0" Height="Auto" Command="{Binding DataContext.DeleteCommand, ElementName=SalesGridview}" CommandParameter="{Binding Id}" Style="{StaticResource CustomCancelPopupButtonStyle}" >
<Button.Content>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
<TextBlock Text="" FontSize="16" VerticalAlignment="Center" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
<TextBlock Text="Remove Widget" Margin="10,3,0,0" FontSize="14" VerticalAlignment="Center" FontFamily="Segeo UI Semibold" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</Grid>
</DataTemplate>
</callisto:LiveTile.ItemTemplate>
</callisto:LiveTile>
</DataTemplate>
</Models:VariableSizedGridView.ItemTemplate>
<Models:VariableSizedGridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid VerticalAlignment="Center" Orientation="Horizontal"
ItemHeight="90"
ItemWidth="90">
<VariableSizedWrapGrid.ChildrenTransitions>
<TransitionCollection>
<RepositionThemeTransition></RepositionThemeTransition>
<ReorderThemeTransition></ReorderThemeTransition>
</TransitionCollection>
</VariableSizedWrapGrid.ChildrenTransitions>
</VariableSizedWrapGrid>
</ItemsPanelTemplate>
</Models:VariableSizedGridView.ItemsPanel>
</Models:VariableSizedGridView>
am using above code for a variable sized gridview to show the item, in those items, some of items I want to display as live tiles.
How to bind the data for both Gridview and and Callisto Live tiles items.
Thanks in advance.
I have the following problem:
<DataTemplate x:Key="OrganisationsItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Transparent">
<Border Background="White" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<!--<TextBlock Text="{Binding name}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" />-->
<phone:LongListSelector x:Name="SpacesList"
Background="Transparent"
ItemTemplate="{StaticResource SpacesTemplate }"
ItemsSource="{Binding spaces}"
Margin="40,0,0,96"
LayoutMode="List"
HideEmptyGroups="True"
IsGroupingEnabled="False" VerticalContentAlignment="Top">
</phone:LongListSelector>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SpacesTemplate">
<Border Background="Transparent" Padding="5,0,0,5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62"
Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding name}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
In my data template I am placing LongListselector... which also needs a template. but the SpacesTemplate that is defined outside the current datatemplate cannot be seen. any ideas how to reference the datatemplate "SpacesTemplate" from within the datatemplate "OrganisationsItemTemplate"
Xaml is read top down, if you want to use SpacesTemplate inside OrganisationsItemTemplate you will have to put SpacesTemplate before OrganisationsItemTemplate in the Xaml
I have a ListBox which contains all the Categories
and each category will contain subcategories in an other ListBox
how do i databind?
each "Category" containing "Boards" as its subcategory
this is my xaml
<ListBox Background="Transparent" BorderThickness="0" Grid.Row="3" Grid.ColumnSpan="2" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle}" ItemsSource="{StaticResource designTimeCategoriesDS}" DataContext="{StaticResource designTimeCategoriesDS}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="Category" Orientation="Vertical" HorizontalAlignment="Stretch">
<Border CornerRadius="6" Padding="0" Margin="0" Height="30" HorizontalAlignment="Stretch">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF6D869F" Offset="0"/>
<GradientStop Color="#FFA6BACE" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<sdk:Label x:Name="CategoryName" FontSize="16" Margin="8,0" Foreground="White" FontWeight="Bold" Height="30" HorizontalAlignment="Stretch"/>
</Border>
<ListBox x:Name="CategoryBoards" Background="Transparent" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle}" ItemsSource="{Binding }">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="350*"/>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="70*"/>
</Grid.ColumnDefinitions>
<HyperlinkButton FontSize="16" Margin="0,0,0,1" Padding="8" Foreground="Black" FontWeight="Bold" VerticalAlignment="Stretch" Background="#FFE7EAEF"></HyperlinkButton>
<StackPanel Grid.Column="1" Margin="1,0,0,1" Background="#FFF0F4F7">
<HyperlinkButton FontSize="14" Margin="0" Padding="8,8,8,0" Foreground="#FFD97B33" FontWeight="Bold" Content="{Binding Path=CategoryBoards.BoardName}" />
<sdk:Label Margin="0" Padding="8,0,8,8" Foreground="Black" Content="{Binding Path=CategoryBoards.BoardDescription}" />
</StackPanel>
<StackPanel Grid.Column="2" Margin="1,0,0,1" Background="#FFE7EAEF">
<sdk:Label Margin="0" Padding="8,8,8,0" Content="{Binding Path=BoardPosts}" />
<sdk:Label Margin="1,0,0,1" Padding="8,0,8,8" Content="{Binding Path=BoardTopics}" />
</StackPanel>
<StackPanel Grid.Column="3" Margin="1" Background="#FFF0F4F7">
<sdk:Label Margin="0" Padding="4,2,4,0" Content="Last post by {User}"/>
<sdk:Label Margin="0" Padding="4,0,4,0" Content="in {Topic Name}"/>
<sdk:Label Margin="0" Padding="4,0,4,2" Content="on {Date}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Just glancing at your code quickly, the only thing you should need to do is change this line:
<ListBox x:Name="CategoryBoards" Background="Transparent" BorderThickness="0"
Margin="0" Padding="0" HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
ItemsSource="{Binding }">
to this:
<ListBox x:Name="CategoryBoards" Background="Transparent" BorderThickness="0"
Margin="0" Padding="0" HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
ItemsSource="{Binding Boards}">
The DataContext of your inner ListBox will be the Category, so the source of that binding is, implicitly, the Category.