I have an ObservableCollection<testItem> and every testItem has another ObvervableCollection<testData>.
Know for every testData I want a ListItem with some Data of the testItem and from testData. At the moment I set the ObservableCollection<testItem> as ItemsSource of the List but than I get only the first item of the itemsData.
What can I do?
UPDATE:
xaml:
<ListBox Name="ResultList" ItemsSource="{Binding TankstellenItem}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF3AACDF" BorderThickness="4">
<StackPanel Orientation="Horizontal"
Background="White"
UseLayoutRounding="True" Tap="ItemIsClicked">
<StackPanel Width="130" Orientation="Vertical" Margin="0,0,0,0">
<Border BorderThickness="2"
Background="#FF3AACDF" BorderBrush="White">
<TextBlock Text="{Binding PriceBigDigits}"
FontFamily="Assets/Font.ttf#LCD"
FontSize="25" TextAlignment="Center" />
</Border>
<TextBlock Text="{Binding FuelType}"
TextAlignment="Center"
FontSize="15" Foreground="Black"/>
<TextBlock Text="{Binding UpdateDate}"
TextAlignment="Center"
FontSize="15" Foreground="Black" />
<TextBlock Text="{Binding DistanceString}"
TextAlignment="Center"
FontSize="15" Foreground="Black"/>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="10,0,0,0" Width="400">
<TextBlock Text="{Binding Title}"
FontSize="30" FontWeight="Bold" Foreground="Black"/>
<TextBlock Text="{Binding Address}" FontSize="20" Foreground="Black" />
<TextBlock Text="{Binding PLZCity}" FontSize="20" Foreground="Black" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
than I have the testItem:
public testItem{
DistanceString (string),
Title (string),
Addresse (string),
PLZCity (string),
itemDates (ObservableCollection<itemData>)}
And the itemData:
public itemData{
PriceBigDigits (string),
FuelType (string),
UpdateDate (string)
If I understand you correctly, you may want to bind the itemDates to a ItemsControl's ItemsSource property. So wrap your second StackPanel within the DataTemplate of an ItemsControl.
Related
I am using ListPicker from windows phone toolkit. My options are pretty lengthy so my ItemTemplate is,
<DataTemplate>
<TextBlock TextWrapping="Wrap"/>
</DataTemplate>
Now, when I select a lengthy option(say three lines) in Expansion Mode (less then 5 options) it is working good as expected, but when I Use FullMode(more than 5 items) it is not wrapped in the ListPicker.
To be more clear, It is wrapped as expected in the FullModePage but it is not within the control.
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" Template="{StaticResource ListPickerControlCustomTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontFamily="{StaticResource RegularFont}"
SelectionChanged="SharedAppsCategoryListPicker_OnSelectionChanged" Name="SharedAppsCategoryListPicker"
LayoutUpdated="SharedAppsCategoryListPicker_OnLayoutUpdated" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}"></TextBlock>
<Rectangle Margin="20,10,0,-11" Height="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="{StaticResource ListPickerDividerColor}" StrokeThickness="0.5" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock MaxWidth="250" Width="250" TextWrapping="Wrap" FontSize="20" Margin="0,0,120,0" VerticalAlignment="Center" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}" FontFamily="{StaticResource RegularFont}"></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
you would be needed to give width for the Textblock after then Text Would be Wrapped if content is larger than the width of the Textblock.
try this :
<DataTemplate>
<TextBlock TextWrapping="Wrap" width=200/>
</DataTemplate>
Edit:
I have Implemeted it this way
XAML:
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="SharedAppsCategoryListPicker" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="300" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="400" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" VerticalAlignment="Center" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Images of O/P:
I have this code:
<ListBox x:Name="lisbox1" Margin="-24,0,-9,0" CacheMode="BitmapCache" ItemsSource="{Binding Teacher}" HorizontalAlignment="Right" MouseLeftButtonUp="lisbox1_MouseLeftButtonUp" SelectionChanged="lisbox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,-35">
<Image x:Name="image1" Stretch="Fill" Source="ticket.png" Margin="-15,-16,3,21"/>
<TextBlock x:Name="asda" Margin="56,50,0,0" TextWrapping="Wrap" TextAlignment="Left" Text="{Binding lastname}" Style="{StaticResource PhoneTextLargeStyle}" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Width="264" />
<TextBlock Margin="56,106,43,90" TextWrapping="Wrap" TextAlignment="Left" Text="{Binding firstname}" Style="{StaticResource PhoneTextLargeStyle}" />
<TextBlock Margin="0,50,43,147" Text="{Binding auditnumb}" Style="{StaticResource PhoneTextLargeStyle}" RenderTransformOrigin="0.515,-1.286" HorizontalAlignment="Right" Width="98" />
<Border Background="Silver" BorderThickness="1,1,1,1" Height="40" CornerRadius="20,20,20,20" Margin="56,3,60,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding subname}" TextAlignment="Center" VerticalAlignment="Top" Style="{StaticResource PhoneTextTitle3Style}"/>
</Border>
<Border BorderThickness="1" Height="40" Background="Green" Width="69" CornerRadius="25,25,25,25" Margin="316,154,61,41" Name="border1" >
<TextBlock Text="{Binding End}" TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource PhoneTextTitle3Style}" Width="69" Margin="-2,1,-3,-1"/>
</Border>
<Border BorderThickness="1" Background="Red" CornerRadius="25,25,25,25" Name="border2" Height="40" Width="69" Margin="230,154,147,41" >
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding Start}" Style="{StaticResource PhoneTextTitle3Style}" Width="69" Margin="-2,1,-3,1"/>
</Border>
<Border Background="WhiteSmoke" CornerRadius="40" BorderThickness="1" Height="40" HorizontalAlignment="Left" Margin="16,88,0,0" Name="border3" VerticalAlignment="Top" Width="40" >
<TextBlock Margin="5" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Text="{Binding PairNumber}" Width="28" RenderTransformOrigin="0.304,-0.462" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" Height="28" VerticalAlignment="Top"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How to change the image when you select an item from the listbox? I have tried using VisualStateManager, but nothing happens.
It's hard to tell the best way without more code, but one way to do this is to add a property for the image path to the 'Teacher' class and bind the image source to it. Then when the item is clicked, change the image path in the Teacher object. (make sure your teacher class correctly supports OnPropertyChanged() for the image path property).
Use the following code to change the image source in C# (just put it after the desired event handler)
var image = (Image)sender;
image.Source = new Uri("/AppName;component/Images/imageName.png", UriKind.Relative)
Make sure that the image you want to use is saved to your Image folder
(Replace spaces in your app name with %20)
I have a LongListHeaderTemplate that consists of a list and a button. You will see how are they distributed in the code below. My problem is that I need sometimes hide button in code-behind file. How I can do that?!
XAML:
<toolkit:LongListSelector Grid.Row="1" ListHeader="{Binding EpsLaterItems}" IsFlatList="True" ItemsSource="{Binding EpsItems}" x:Name="EPS" SelectionChanged="EPS_SelectionChanged_1">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageUrl, Converter={StaticResource BmpConverter}}" Width="100" Height="100" VerticalAlignment="Top" Margin="0,10,18,0"/>
<StackPanel Margin="0,0,0,20" Width="300">
<TextBlock Text="{Binding Date, ConverterCulture=ru-RU, StringFormat=f}"
FontSize="22" FontWeight="Bold" Foreground="#FFD65B2D" />
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" FontSize="22" Foreground="Aqua" />
</StackPanel>
</StackPanel>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
<toolkit:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<StackPanel>
<ListBox x:Name="listbox1" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageUrl, Converter={StaticResource BmpConverter}}" Width="100" Height="100" VerticalAlignment="Top" Margin="0,10,18,0"/>
<StackPanel Margin="0,0,0,20" Width="300">
<TextBlock Text="{Binding Date, ConverterCulture=ru-RU, StringFormat=f}"
FontSize="22" FontWeight="Bold" Foreground="#FFD65B2D" />
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" FontSize="22" Foreground="Aqua" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="footerEpsLater" Content="more..."
FontSize="30" Foreground="SteelBlue" Style="{StaticResource StyleForButton}" BorderBrush="#FFFF2121"/>
</StackPanel>
</DataTemplate>
</toolkit:LongListSelector.ListHeaderTemplate>
<toolkit:LongListSelector.ListFooterTemplate>
<DataTemplate>
<Button Content="more..." FontSize="30" Foreground="SteelBlue" Click="footerEPS_Click_1" Style="{StaticResource StyleForButton}"/>
</DataTemplate>
</toolkit:LongListSelector.ListFooterTemplate>
</toolkit:LongListSelector>
If i do like this footerEpsLater.Visibility = Visibility.Collapsed; I get the error: footerEpsLater does not exist in this context
__________________________
__________Item1____________
__________Imemnumber2_____
__________Item3____________
__________________________
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="MainListBox" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Image Source="{Binding Image}" Stretch="None"/>
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
how can I do that?
____________________________
___________Item1_____________
_________Imemnumber2________
___________item3_____________
____________________________
Try to set the TextAlignment property of the TextBox
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center"/>
UPDATE:
Try to fix the width of the TextBlock as shown below
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center" Width="400"/>
my problem is how can i set listbox which has itemtemplate ,and it also itemteplate of pivot
.i don't have any idea to doing this but it is a need of my project .one another is how to set pivot header . i m trying to do something like that
<controls:Pivot Height="779" Name="m" >
<controls:Pivot.Background>
<ImageBrush ImageSource="/WindowsPhoneApplication7;component
/Images/S.jpeg" />
</controls:Pivot.Background>
<!--<controls:PivotItem Name="all" >-->
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ListBox Height="450" HorizontalAlignment="Stretch" Margin="8,6,0,0" Name="listBox1" VerticalAlignment="Stretch" Background="#00537393" Width="445" >
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="Black" CornerRadius="8" BorderThickness="1" HorizontalAlignment="Stretch" Name="border">
<Grid HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0*" />
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<Image Height="78" HorizontalAlignment="Left" Margin="13,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="92" Grid.Row="1" Source="{Binding ImageSource}" />
<TextBlock Foreground="White" Height="80" HorizontalAlignment="Left" Margin="111,12,0,0" Name="textBlock1" Text="{Binding Title}" VerticalAlignment="Top" Width="280" TextWrapping="Wrap" Grid.Row="1" />
<Image Grid.Row="1" Height="75" HorizontalAlignment="Left" Margin="380,12,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="73" Source="/WindowsPhoneApplication7;component/Images/appbar.transport.play.rest.png" />
<TextBlock Foreground="White" Grid.Row="1" Height="20" HorizontalAlignment="Left" Margin="111,88,0,0" Name="textBlock2" Text="{Binding date}" VerticalAlignment="Top" Width="190" FontSize="11" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Pivot.ItemTemplate>
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="hiii" TextWrapping="Wrap" FontSize="0" Foreground="White" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
</controls:Pivot>
You can set the header of a Pivot control to pretty much anything since it is an object. To set it to an image instead of a default title set the Title to "" and do this in the constructor of your page:
YourPivotControl.Title = new Image { Width = 400, Source = new BitmapImage(new Uri("/someImage.png", UriKind.Relative)) };
Did you take a look at the default pivot page setup by visual studio? They do exactly what you're looking for:
<!--Pivot Control-->
<controls:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<controls:PivotItem Header="first">
<!--Double line list with text wrapping-->
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>