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.
Related
I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.
This is what I want
I've tried to achieve this with the following XAML:
<RelativePanel>
<TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
</TextBlock>
<TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.RightOf="FileList">
</TextBox>
<ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="Title">
</ListView>
</RelativePanel>
This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.
Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case
Your Editor control should have -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"
Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.
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.
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 have the following ListView defined in a Grid win a <RowDefinition Height="8"> to take up all the visible area. The Listview is bound and created and populated on the fly at page creation. Essentially the list is going to be bigger than the viewable area and taller than the viewable area, so I want to be able to scroll up to down and left to right.
Basically, the vertical scroll bar appears but it doesn't work. It shows lots of area to be scrolled but it is unmoveable with mouse. The Horizontal scroll seems to appear off the bottom of the list as the mouse wheel does scroll horizontally, but the scroll bar isn't seen.
<ListView
x:Name="itemListViewHorizontal"
AutomationProperties.AutomationId="ItemListView"
AutomationProperties.Name="Grouped Items"
Grid.Row="1"
Visibility="Visible"
Margin="0,-10,0,0"
Padding="10,0,0,60"
ItemsSource="{Binding Source={StaticResource SearchItemsViewSource}}"
ItemTemplate="{StaticResource Standard80PersonTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="7,7,0,0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
Essentially, what I want is to have the scrollbars at the left and bottom to scroll side to side or top to bottom. But no matter what I try, short of getting rid of the ItemsPanelTemplate and ItemsPanel information, which makes a single long list, it doesn't work.
Any suggestions?
In changing this, my vertical scrollbar works but horizontal is toast.
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Well, I was looking for a much more elegant way of doing this. Apparently, stackpanel cannot be used for both scrollbars at the same time, though it doesn't explicitly say this. So, I surrounded my listview with a scrollviewer, using a name and then disabling on snap view.
Problems solved, but I was looking for a way without so much nesting, but, it is what it is.