the property content is set more than once - xaml

I am getting the following error with my code shown below.
Error:
The property 'Content' is set more than once
Code:
<controls:PanoramaItem Header="headlines">
<TextBlock Text="{Binding Tones}" />
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Source="{Binding ImageUrl}" Height="75" Width="100"
Margin="12,10,9,0" VerticalAlignment="Top"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextLargeStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>

A PanoramaItem can only have one child control but you currently have a TextBlock and a ListBox. To fix this, simply add another parent control to hold the TextBlock and ListBox (such as a StackPanel or a Grid). For example:
<controls:PanoramaItem Header="headlines">
<grid>
<TextBlock Text="{Binding Tones}" />
<!--Double line list with image placeholder and text wrapping-->
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Source="{Binding ImageUrl}" Height="75" Width="100" Margin="12,10,9,0" VerticalAlignment="Top"/>
<!--<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>-->
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
<!--<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</grid>
</controls:PanoramaItem>

Related

Styling ListView in UWP

I found this question + answer to my problem here on stackoverflow, but for me its not totally clear where to change the
ListViewItemPresenter
I tried many things, but it seems like I cant find it on my own :(
Here is my XAML code for this frame:
<Page.Resources>
<DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource ItemListDataTemplate}"
>
</ListView>
</Grid>
Can someone help me our please? Thank you very much for your time!
There are two ways to edit ListViewItemPresenter in your Page:
You can copy the XAML Template from here (the first XAML codes block below Default Style). Add it to your Page.Resources. ListViewItemPresenter lies among those XAML codes, you can edit its Properties and this style will be applied to all the items of this page's ListView. Notes: don't add x:Key to this style.
Add a ListViewItem Control to your Page like below:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListViewItem></ListViewItem>
</Grid>
Document Outline->Select ListViewItem->Edit Template->Edit a Copy:
Remove the x:Key Property of generated Style Resource, so that this style will be applied to all ListViewItem. Then you can edit the ListViewItemPresenter in the generated XAML Resource.
Just add your DataTemplate inside of the Listview.
Put it in the ItemTemplate property.
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

TextBlock is Cutting Text in Windows Phone

In my WP8 project textblock is cutting text unexpectedly. How can I solve it? I have used VerticalAlignment Strecth or Height auto in scrollviewer but they have not solve it.
And my xaml, I am using one of these stackpanels :
<ScrollViewer>
<Grid>
<StackPanel x:Name="stackNormal" Visibility="Collapsed" VerticalAlignment="Top" Background="Transparent">
<ListBox Name="ImageList" ItemsSource="{Binding Summary.Text , Converter={StaticResource ImageFromRssText}}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding URL}" Tag="{Binding Title}" Margin="5,15,0,0"></Image>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock TextDecorations="Underline" MouseLeftButtonUp="feedTitle_MouseLeftButtonUp" FontSize="25" Name="feedTitle" TextWrapping="Wrap" HorizontalAlignment="Stretch" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" VerticalAlignment="Top" Margin="5,3,0,2" />
<TextBlock Name="feedSummary" TextWrapping="Wrap" Margin="5,0,15,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmerLong}}" HorizontalAlignment="Stretch" FontSize="20" VerticalAlignment="Stretch"/>
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,20,0,5" Text="{Binding PublishDate.DateTime}" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel x:Name="stackPhotoBug" Visibility="Collapsed" VerticalAlignment="Top" Background="Transparent">
<ListBox Name="ImageList2" ItemsSource="{Binding Links}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Converter={StaticResource ImagesFromRssTextForPhotoBug}}" HorizontalAlignment="Stretch" Margin="5,15,0,0" MaxHeight="500"></Image>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock TextDecorations="Underline" MouseLeftButtonUp="feedTitle_MouseLeftButtonUp" FontSize="25" Name="feedTitle2" TextWrapping="Wrap" HorizontalAlignment="Stretch" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" VerticalAlignment="Top" Margin="5,3,0,2" />
<TextBlock Name="feedSummary2" TextWrapping="Wrap" Margin="5,0,15,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmerLong}}" HorizontalAlignment="Stretch" FontSize="20" VerticalAlignment="Stretch"/>
<TextBlock Name="feedPubDate2" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,20,0,5" Text="{Binding PublishDate.DateTime}" HorizontalAlignment="Center" />
</StackPanel>
</Grid>
</ScrollViewer>
Maybe it is because of such big text (TextBlock has limit - 2048px). You should try ScrollableTextBlock
Place the textblock inside scrollviewer
<scrollviewer verticalBarvisibility="visible">
<TextBlock Name="feedSummary" TextWrapping="Wrap"
Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmerLong}}"
HorizontalAlignment="Stretch" FontSize="20"
VerticalAlignment="Stretch"/>
</scrollviewer>
Any element that must be displayed beyond the area which is larger than 2048x2048 pixels would be clipped by the platform
Creating Scrollable TextBlock for WP7.

XAML error: "The property 'VisualTree' is set more than once"

I'm trying to put two Grids in a DataTemplate.
I'm getting the following error with my code shown below.
Error: "The property 'VisualTree' is set more than once"
<DataTemplate x:Key="PareoItemTemplate">
<Grid x:Name="gridColorEjercicio" Height="100" Width="350" Background="#FFF0F0F0" Margin="-11,0,0,0">
<StackPanel Margin="0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="0,10,15,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding letter}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Foreground="Black" VerticalAlignment="Center"/>
<TextBlock TextWrapping="Wrap" Text="{Binding option}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Width="253" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<Grid VerticalAlignment="Center" Margin="5,10,5,0" HorizontalAlignment="Center">
<Image Source="{Binding imageURI}" />
</Grid>
</StackPanel>
</Grid>
<Grid x:Name="gridPareoColorEjercicio" Height="100" Width="350" Background="#FFF0F0F0" Margin="-11,0,0,0">
<StackPanel Margin="0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="0,10,15,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding letter}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Foreground="Black" VerticalAlignment="Center"/>
<TextBlock TextWrapping="Wrap" Text="{Binding option}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Width="253" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<Grid VerticalAlignment="Center" Margin="5,10,5,0" HorizontalAlignment="Center">
<Image Source="{Binding imageURI}" />
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
A data template can only have one visual tree but you are defining two grids. If you want the two grids to appear next to each other or one below the other, wrap them in a StackPanel and set the property Orientation accordingly.
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid>[...]</Grid>
<Grid>[...]</Grid>
</StackPanel>
</DataTemplate>

how to draw lines between each row in a list?

The below given is the code which use getting each row of a list,
<ListBox x:Name="List" HorizontalAlignment="Left" Height="575" Margin="6,0,0,0" VerticalAlignment="Top" Width="443" SelectionChanged="List_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="430" Height="80">
<Grid Margin="0,0,0,0" Height="90" Width="305">
<TextBlock HorizontalAlignment="Left" Height="60" Margin="0,0,0,0" FontWeight="Medium" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top" Width="268" FontSize="25"/>
<TextBlock HorizontalAlignment="Left" Height="60" Margin="0,36,0,-1" TextWrapping="Wrap" Text="{Binding TaxType}" VerticalAlignment="Top" Width="259" Foreground="Gray" FontSize="16"/>
</Grid>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" FlowDirection="RightToLeft" Grid.Row="0" Width="125" HorizontalAlignment="Right">
<TextBlock Text="{Binding Percentage}" FontSize="23" VerticalAlignment="Center" HorizontalAlignment="Right" FontFamily="Portable User Interface" Height="75"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now how can i draw a line at the end of this stack panel(i.e between each row in the list)
What you have to do is,Add your current data within the stackpanel and then add Path mentioned in the previous answer and place these two within a stackpanel with Orientation = Horizontal
In your StackPanel underneath all other, apply this:
<Path Data="M0,0 L1,1 M0,1 L1,0" Stretch="Uniform" Stroke="Red" />

Horizontal alignment of Expanderview items in windows phone 7

I want to align the contents or items of ExpanderView in horizontal layout instead of vertical layout. The ExpanderHeader is set dynamically and also its contents are added dynamically.
The xaml part and CustomeItemTemplate in app.xaml is as below
<toolkit:ExpanderView
Width="470"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander"
Margin="5,10,5,10"
Foreground="#FF677389" FontSize="24" VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
</toolkit:ExpanderView>
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Horizontal" Height="60" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}"
TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150"/>
</StackPanel>
</DataTemplate>
Still i get the contents aligned vertically. Can someone point me what am i doing wrong here?
here is the sample code you have asked for
<Border BorderBrush="White" BorderThickness="1" Margin="5">
<ScrollViewer Width="Auto" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<toolkit:ExpanderView
Width="1600"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander" Margin="5,10,5,10" Foreground="#FF677389" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
</ScrollViewer>
</Border>
and my app.xaml has CustomItemTemplate definition as below
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Vertical" Height="100" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150">
<TextBox.InputScope>
<InputScope >
<InputScopeName NameValue="Number"></InputScopeName>
</InputScope>
</TextBox.InputScope>
</TextBox>
</StackPanel>
</DataTemplate>
I want to horizontally scroll only ExpanderView items. Rightnow it is scrolling but the whole ExpanderView is scrolling including its header. The header must be intact and only the items must scroll. How can i acheive it?
You should set the ItemsPanel for the ExpanderView control.
<toolkit:ExpanderView
Width="470" Height="100"
x:Name="taskNameExpander"
Margin="5,10,5,10"
FontSize="24" Background="White"
HorizontalAlignment="Left"
ItemsSource="1 2 3 4"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>