Develop Reference

WPF Textblock With Bound Text Will Not Scroll

The text in my TextBlock is bound to an element in my code. However, when I first open my window, the Textblock is completely empty. As I add text, I need the ScrollViewer to allow me to scroll down the text, or automatically scroll down as more text is added. Using the MVVM, so no code behind would be ideal.
<StackPanel Grid.Column="0" Grid.Row="1" Margin="0 10">
<Label Style="{StaticResource LabelStyle}">Output</Label>
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock ScrollViewer.CanContentScroll="True" Height="100" VerticalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding Path=ProcessingOutput}"/>
</ScrollViewer>
</StackPanel>
How can I make this happen? Is there a way to update the ScrollViewer so that it sees more text is beyond what I can see in the TextBlock and allows the user to scroll down, or allows me to set an autoscroll feature that scrolls down automatically as text is added via binding?
Thanks in advance!

scrollbar will work if you remove Height="100" from TextBlock
to make it scroll when Text changes other answers suggest to use ScrollViwer.ScrollToBottom() method, e.g. like this:
<ScrollViewer Name="scroll"
VerticalScrollBarVisibility="Visible"
Height="100">
<TextBlock ScrollViewer.CanContentScroll="True"
VerticalAlignment="Stretch"
TextWrapping="Wrap"
Text="{Binding Path=ProcessingOutput, NotifyOnTargetUpdated=True}"
TargetUpdated="Txt_OnTargetUpdated">
</TextBlock>
</ScrollViewer>
private void Txt_OnTargetUpdated(object sender, DataTransferEventArgs e)
{
scroll.ScrollToBottom();
}

C# XAML Listbox collapse when clicked

I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.

The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.

set visibility of image dynamically in expanderview

I am trying to implement something where I need to display list of people and a green icon if they are online. these people are grouped by some categories. I am using an expanderview toolkit control to display the list. So how do I set the icon image to be visible dynamically ? I have tried something like this which didnt work.
<DataTemplate x:Key="groupsItemTemplate">
<StackPanel Orientation="Horizontal" Margin="30,5,0,0"">
<Image Height="30" Width="30" Source="/Assets/Online.png" Margin="10,5,0,0" Visibility="{Binding IsFriendOnline}"></Image>
<TextBlock TextWrapping="NoWrap" FontFamily="Segoe WP Light" FontSize="24" Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="left" Height="auto" Width="300" Text="{Binding FriendName}"></TextBlock>
</StackPanel>
</DataTemplate>
IsFriendOnline is an integer property.

Firstly, you need to use a converter in order to convert the value of your IsFriendOnline property to the Visibility enum that you require.
WPF has a "BooleanToVisibilityConverter" built in so if you have the ability to change the IsFriendOnline to a boolean value (which sounds like it makes a little more sense anyway) I would go down this route... if its imperative that the property is an integer then you will need to roll your own converter which isnt difficult.
The syntax would look something like this when you have a converter (my code below assumes IsFriendOnline is a boolean)...
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="groupsItemTemplate">
<StackPanel Orientation="Horizontal" Margin="30,5,0,0"">
<Image Height="30" Width="30" Source="/Assets/Online.png" Margin="10,5,0,0" Visibility="{Binding IsFriendOnline, Converter={StaticResource BooleanToVisibilityConverter}}"></Image>
<TextBlock TextWrapping="NoWrap" FontFamily="Segoe WP Light" FontSize="24" Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="left" Height="auto" Width="300" Text="{Binding FriendName}"></TextBlock>
</StackPanel>
</DataTemplate>
Hope this helps...

ScrollViewer in a listbox

I´m filling a listbox with a specific data, the code works fine, but I need to add a scrollviewer to the listbox because there are many elements inside, I tried to use a ScrolViewer and put inside the listbox, but doesn't work, here is the code
<StackPanel x:Name="Sites" Grid.Row="1" Orientation="Vertical">
<ListBox x:Name="ListSites" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="120" Click="click" Name="btn">
<Button.Content>
<StackPanel Orientation="Vertical" Height="100" Width="460">
<TextBlock Width="460" Name="txtname" FontSize="22" Text="{Binding name}" Height="40" Foreground="CadetBlue" />
<TextBlock Width="460" Name="txtUrl" FontSize="22" Text="{Binding Url}" Height="60"/>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

I fixed it, simply adding the Height property in the ListBox control

If the ListBox is not given infinite space for height then it should automatically scroll when items overflow its boundaries. For instance, if the second Grid row outside your stackpanel has explicit or 'star' height set, the scrollbar in the listbox will show up automatically.
See also: Silverlight: Difficulty with ScrollViewer

You shouldn't need to add a ScrollViewer to your ListBox. It will start scrolling when it runs out of room.
However, because you've put the ListBox inside a StackPanel it won't ever think it's run out of room because the StackPanel grows infinitely in the direction of it's orientation to accommodate its contents.
You'll need to use a different container for your ListBox.

<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Listbox extending off the page

I have a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>

I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.