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.
Related
Question: Why won't my databound text render as text
When I am using databound TextBlock controls, the output in my Windows App shows as Squares, like it can't figure out what to render the text as. If I put actual text in the Text property, it displays normally.
<RelativePanel x:Name="BasicInfo" RightOf="ProfilePicture">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="FirstName" Text="{Binding FirstName}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
<TextBlock x:Name="LastName" Text="{Binding LastName}"
TextWrapping="NoWrap" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock x:Name="EmailAddress" HorizontalAlignment="Left" Text="{Binding EmailAddress}"
TextWrapping="NoWrap" Margin="10,2,0,0" />
<TextBlock x:Name="PhoneNumber" HorizontalAlignment="Left" Text="{Binding PhoneNumber}"
TextWrapping="NoWrap" Margin="10,2,0,0" />
</StackPanel>
</RelativePanel>
<RelativePanel x:Name="AddressInfo" Below="BasicInfo" RightOf="ProfilePicture" Margin="0, 20, 0, 0">
<StackPanel Orientation="Vertical">
<TextBlock x:Name="Address1" HorizontalAlignment="Left" Text="{Binding Address1}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
<TextBlock x:Name="Address2" HorizontalAlignment="Left" Text="{Binding Address2}"
TextWrapping="NoWrap" TextAlignment="Left" Margin="10,0,0,0"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="City" HorizontalAlignment="Left" Text="{Binding City}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
<TextBlock>,</TextBlock>
<TextBlock x:Name="State" Text="{Binding State}"
TextWrapping="NoWrap" Margin="3,0,0,0"/>
</StackPanel>
<TextBlock x:Name="ZipCode" HorizontalAlignment="Left" Text="{Binding ZipCode}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
</StackPanel>
</RelativePanel>
Here is what the output looks like:
we can try in xaml.cs page
Dispatcher.BeginInvoke(delegate
{
listboxname.ItemsSource = Resultclassname;
});
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>
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" />
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>
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>