I have some long article to show in an view. So I made a TextBlock and bound Text with Content property.
Xaml:
<Grid Margin="12,24,12,0"
Background="White">
<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"
Foreground="Black"
Text="{Binding Column.Title}"
TextWrapping="Wrap"
Margin="0,0,0,12"
VerticalAlignment="Top" />
<ScrollViewer Margin="0,62,0,10">
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="{Binding Column.Content}"
TextWrapping="Wrap" />
</ScrollViewer>
</Grid>
The last paragrafs of the article:
The problem is that it doesn’t show the last paragraphs O_o:
What is the problem and how can I fix it?
The reason for this behavior is that any element that must be displayed beyond the area which is larger than 2048x2048 pixels would be clipped by the platform.
Maybe this article can help you : Creating Scrollable TextBlock for WP7.
Related
I'm new at developing apps for Windows 8, and its my first encounter with XAML.
I'm trying to build a GridView that will show a grid of 150x150 tiles. The GridView's XAML looks like this:
<GridView Grid.Row="2" Grid.Column="0"
x:Name="ClocksContainer"
VerticalAlignment="Top"
Height="190"
Margin="80,20,80,0"
HorizontalContentAlignment="Left">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="150" Margin="75,0,940,0" Width="150" Background="#FF971485">
<TextBlock Text="12:23pm" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="130" FontSize="32" Foreground="White"/>
<TextBlock Text="23 February, 2014" HorizontalAlignment="Left" Margin="10,48,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-0.444,0.385" Foreground="#B2FFFFFF"/>
<TextBlock Text="29° / 20°" HorizontalAlignment="Left" Margin="102,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" TextAlignment="Right" FontSize="10"/>
<TextBlock Text="Party Cloudy" HorizontalAlignment="Left" Margin="10,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" FontSize="10"/>
<Border BorderBrush="{x:Null}" HorizontalAlignment="Left" Height="45" Margin="10,78,0,0" VerticalAlignment="Top" Width="130">
<TextBlock Text="Chennai, India" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Foreground="White" Width="130" FontSize="14"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Items>
<x:String>test</x:String>
<x:String>test</x:String>
</GridView.Items>
</GridView>
However, in the output I'm finding that my grid items are stretching to the width of the grid itself!
To illustrate, here are two cropped screenshots of the rendered GridView.
The first screenshot shows how a grid item expands to the width of the GridView. (I've added the red outline myself in photoshop).
The second screenshot is of the gridview scrolled ahead to reveal teh second item. The red outline on the first item has been replicated via photoshop. The second item's background is a darker colour because it is mouse-over-ed.
My Question: How do I make the grid items not expand to the width? The intended output is this:
Remove Margin="75,0,940,0" from GridView's ItemTemplate
I have a ListBox with this template in it.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<StackPanel Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000" Width="460" MinHeight="76">
<StackPanel Margin="4,4,-4,-153">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
<TextBlock " Text="{Binding Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Yet I have to force set a Width and Height on the Border otherwise it makes like Width and Height of "2".
It is like it does not understand I have 2 TextBlock inside it and won't expand to fill both of them.
This leaves me with having to put a fixed height and width in what I don't like as if the text is too big it gets cutoff.
You can toss out your StackPanel's because you don't need them, they're also what's keeping your wrapping from working, you need a panel like a Grid for that. The negative Margin's also isn't something you'd normally see in a DataTemplate for a ListBox so I'd guess you have some other funky layout stuff going on from that sort of practice elsewhere up the tree.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<Grid Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000"/>
<TextBlock TextWrapping="Wrap"
HorizontalAlignment="Center" Margin="4,4,-4,-153">
<Run Text="{Binding }"/><LineBreak/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
So unless I'm missing something somewhere this should fix you up as the Grid will handle the sizes of its children for you and consume the space necessary in its parent. However if there's something else in your structure pushing stuff around and won't let it consume that space it should invoke your Wrapping.
Hope this helps :)
I would like to change the background of my grid to white when you hover over or select it. I'd also like to change the color of the text inside at the same time to black. This is specific to one page only, so it would need to be applied with an XKey or something as a guess. The grid starts with a transparent background, also.
I'm really struggling to find the direction for this. Please let me know if you have any ideas or links!
Here's my code:
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="335" Height="152">
<StackPanel Orientation="Horizontal" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Margin="13,0,13,0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Town}" />
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding State}"/>
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Postcode}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
Thanks for any help.
It seems like you would probably want to modify your GridView's ItemContainerStyle and change its background and visual states to match your requirements. Check my answer to an earlier question related to restyling items here to learn how to extract and modify these styles and templates.
I'm relatively new to XAML and Windows Phone development.
I have a ListBox that display a text block. Everything works fine when I just have the ListBox inside a grid, including the scrolling. I wanted the user to be able to collapse the ListBox if they wanted more space on the page to look at other elements, so I surrounded the ListBox with an ExpanderView. Once I did that though, the ListBox won't scroll down anymore. If I try to scroll down, it acts as if I am trying to scroll up and "squishes" the text vertically. If I try to scroll up, it also "squishes" the text vertically, but that is the expected behavior for scrolling up.
Here is the relevant part of my XAML code:
<toolkit:ExpanderView Header="Chatlog" x:Name="chatlogExpander" FontSize="24" VerticalAlignment="Top" Grid.Row="2">
<toolkit:ExpanderView.Items>
<ListBox ItemsSource="{Binding chatlog}" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="ChatBlock" TextWrapping="Wrap">
<Run Text="{Binding player}" Foreground="{Binding color}" FontSize="24" FontWeight="Bold"/><Run Text="{Binding text}" Foreground="{Binding color}" FontSize="24"/>
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
I appreciate any help you guys can give me!
I tried an example with your code and after specifying a Height for the ListBox, it started to scroll fine.
I have a ContentControl wrapped in a ScrollViewer but for some reason I cant work out even though the content that I place within the ContentControl is bigger than the visible space the scrollbars do not get enabled. The verticalscrollbarvisibilty is set to visible.
When I view my silverlight app the vertical scrollbar is also cut off at the bottom i.e. I cant see the button that you would use for scrolling ownwards.
Can anyone shed any light on this or point me in the right direction.
there is no reason for that may be you are doing something wrong see this code may be this will help you
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
sorry forgot to add the layout grid
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
</Grid>