We Keep Coding

"Frozen" column when scrolling horizontal

I am new to c# and UWP and looking for a way to enable horizontal scrolling with frozen column.
Currently this is my list :
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<ListView x:Name="Listeoffice" ItemsSource ="{x:Bind salesoffices}" Margin="0,60,0,0" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled">
<ListView.ItemTemplate>
<DataTemplate x:Name="Template1" x:DataType ="data:office">
<StackPanel Orientation="Horizontal" Margin="0,20,0,0" Width="700" >
<TextBlock Text="{x:Bind caption}" Margin="10,0,0,0" Width="50"/>
<TextBlock Text="{x:Bind invoices}" Margin="50,0,0,0" Width="90"/>
<TextBlock Text="{x:Bind order_entry}" Margin="30,0,10,0" Width="88"/>
<TextBlock Text="{x:Bind delivery_backlog}" Margin="10,0,20,0" Width="100"/>
<TextBlock Text="{x:Bind delivery_new}" Margin="10,0" Width="88"/>
<TextBlock Text="{x:Bind delivery_total}" Margin="20,0,10,0" Width="88"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
The problem is with this approach when I scroll horizontal the first column will not stay.
I read something about using a second ScrollViewer just for the first column but i cant get it working.
EDIT :
Sry wasn´t precise enough. I dont want a header but the first column (the left one) to stay even if the list gets scrolled horizontal.

I think you want header of your ListView.
ListView has a Header property.
<ListView>
<ListView.Header>
your header
</ListView.Header>
</ListView>

Problems with flyout over itemscontrol in Windows Phone 8.1

I've got the following piece of XAML code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding History}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
</ScrollViewer>
<ScrollViewer>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
</ScrollViewer>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}"
TextTrimming="CharacterEllipsis"/>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
There are two problems I can't solve:
The flyout is shown upon tapping on one of items:
private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}
However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?
The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?

So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)
How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.
Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.
Hope this helps, cheers

Windows Phone 8 - TextBlock in StackPanel not wrapping Text properly?

I have an app that is based on the Panorama control. Clicking on an item on one of the Panorama control's pages (tabs) goes to a details page. On that details page I have the XAML below that renders the item content. As you can see there is a TextBlock hosted by a StackPanel in the phone:PanoramaItem.Header element. I want the text in that element to wrap the video title the TextBlock is bound to in the view model. I have TextWrapping set to wrap and I have assigned it a fixed width so the TextBlock doesn't grow/expand (and therefore won't wrap). The text does wrap, but some lines still appear clipped with some words appearing "cut off". What is wrong with my XAML?
I read about using a DockPanel instead:
TextBlock Wrapping in WPF Layout
But this app has a StackPanel used on a lot of different pages so if I can stick with a StackPanel I'd prefer it.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Visibility="{Binding IsInternetAvailable}" Background="{StaticResource PhoneAccentBrush}" Height="30">
<TextBlock Text="{Binding Path=LocalizedResources.NoConnection, Source={StaticResource LocalizedStrings}}" Margin="10, 0"/>
</Grid>
<phone:Panorama x:Name="PanoramaFavorites_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaFavorites_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaFavorites_DetailVideos0" Margin="0,0,0,25">
<phone:PanoramaItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="440" Height="170"/>
</StackPanel>
</phone:PanoramaItem.Header>
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaFavorites_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaFavorites_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaFavorites_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaFavorites_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>

As per your comments, this works for me:
<StackPanel Orientation="Vertical" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}"
Foreground="{StaticResource CustomApplicationTextBrush}"
FontSize="36"
TextWrapping="Wrap"
MaxWidth="440"/>
</StackPanel>

Why does the button size increases as the listbox size gets populated with data?

I'm a newbie to c#. I have designed a windows program with button and listbox. The listbox populates the log as the script runs the application. However, as the listbox gets populated with log, the button and label increases which makes the stack panel very ugly?
Any help/advice would be appreciated. Below is my xaml code.
<Grid>
<Border BorderBrush="Black" BorderThickness="2" Margin="0,11,0,5" CornerRadius="5" Background="White">
<StackPanel Orientation="Horizontal" Margin="7,10,7,2">
<StackPanel Orientation="Vertical">
<TextBlock Text="City" Margin="5" HorizontalAlignment="Center"></TextBlock>
<ComboBox Name="City" SelectedValue="Chicago" SelectedValuePath="Name">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name,Mode=OneWay}"></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<Button Name="btnEnter" Content="Enter" Width="200" Margin="4" Padding="6" Click="btnEnter_Click"></Button>
<Button Name="btnViewLog" Content="View Log" Width="100" Margin="4" Padding="6" Click="btnLog_Click"></Button>
<ListBox Name="lbLog" Visibility="Collapsed">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Description}" IsReadOnly="True" BorderThickness="0" Background="Transparent"></TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Thanks.
Ash

Without your Xaml, it is hard to diagnose the problem, so please try to post it with any further questions. It SOUNDS like it is a horizontal StackPanel, and the elements are all next to each other.
If the orientation of your StackPanel is Vertical, set the HorizontalAlignment on the button to Left, Right, or Center. If the StackPanel orientation is Horizontal, set the VerticalAlignment on the button to Top, Bottom, or Center.
I'm pretty certain both settings are "Stretch" by default, which means they will try to fill all the space that is available, rather than sizing to their content.

How to add a ScrollBar to a Stackpanel

In my WPF application, I have a Stackpanel containing several controls inside them. How can I add a Scrollbar to this stackpanel.

Put it into a ScrollViewer.

Stackpanel doesn't have built in scrolling mechanism but you can always wrap the StackPanel in a ScrollViewer
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel ... />
</ScrollViewer>

It works like this:
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Width="340" HorizontalAlignment="Left" Margin="12,0,0,0">
<StackPanel Name="stackPanel1" Width="311">
</StackPanel>
</ScrollViewer>
TextBox tb = new TextBox();
tb.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
stackPanel1.Children.Add(tb);

For horizontally oriented StackPanel, explicitly putting both the scrollbar visibilities worked for me to get the horizontal scrollbar.
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" >
<StackPanel Orientation="Horizontal" />
</ScrollViewer>

If you mean, you want to scroll through multiple items in your stackpanel, try putting a grid around it. By definition, a stackpanel has infinite length.
So try something like this:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Width="311">
<TextBlock Text="{Binding A}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontStretch="Condensed" FontSize="28" />
<TextBlock Text="{Binding B}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Grid>
You could even make this work with a ScrollViewer