Slow vertical scrolling Listbox - xaml

Does anyone had this problem, horizontal scrollbars for a Listbox are very slow and appear not working correctly.
The code
<ListBox Grid.Row="4" Name="ListBox" Margin="10"
Background="Transparent"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{x:Bind ViewModel.Files}"
SelectedItem="{x:Bind ViewModel.File, Mode=TwoWay}"
DisplayMemberPath="Name"
DoubleTapped="ListBox_DoubleTapped"/>

Related

Vertical Scrollbar not visible in listbox inside popup-element

The vertical Scrollbar is visible in W 8.1 but not in WP 8.1 on my emulator.
What have i missed?
I have also tried to set VerticalScrollBarVisibility to Visible
<Popup x:Name="LayerPopupWindow" IsLightDismissEnabled="True" >
<ListBox x:Name="MyList" Margin="3" Width="auto" Background="#DDFFFFFF"
Height="{Binding Path=ActualHeight,ElementName=MyMapView}" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="auto" >
<CheckBox IsChecked="{Binding IsVisible, Mode=TwoWay}" BorderBrush="Black" MinWidth="30"/>
<TextBlock Text="{Binding ID, Mode=OneWay}" VerticalAlignment="Center" >
<ToolTipService.ToolTip>
<StackPanel MaxWidth="400">
<TextBlock FontWeight="Bold" Text="{Binding CopyrightText}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
</StackPanel>
</ToolTipService.ToolTip>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
Looked at your links Depechie and tried it in my example, for some reason the scrollbars still wasnt visible.
Then i found this link
Making ScrollViewer's ScrollBar always visible through overriding or styling
Tried it and the scrollbars know were visible, so problem solved.

Control not resizing with the gridsplitter

I have a dock panel to the left of my screen which contains a listbox. The listbox is populated with custom items, defined in another class. To the right of my listbox i have a gridsplitter.
When i click and drag my gridsplitter, the listbox gets resized as expected, howvever the items inside do not.
I would like the items inside to resize accordingly so i can use textrimming when the control would be cut off.
I currently have:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" MaxWidth="500" MinWidth="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<toolkit:DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,9,0">
<Button toolkit:DockPanel.Dock="Top" Height="30" Content="Create" Visibility="{Binding Path=IsVisible, Mode=TwoWay}" Command="{Binding Path=Create, Mode=TwoWay}" />
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
<ListBox HorizontalAlignment="Stretch" ItemContainerStyle="{StaticResource ItemContainerStyle}" ItemsSource="{Binding Path=ViewModel, Mode=TwoWay}" SelectedItem="{Binding Path=Selected, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<ContentControl HorizontalAlignment="Stretch">
<myNamespace:MycustomControl HorizontalAlignment="Stretch" DataContext="{Binding}" Height="40"/>
</ContentControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</toolkit:DockPanel>
<sdk:GridSplitter Width="10" HorizontalAlignment="Right" Grid.Row="1" Style="{StaticResource VerticalGridSplitterStyle}" />
Also within my custom item class, everything is defined HorizontalAlignment = Stretch and has no fixed width set.
Edit: Also i have tried binding my custom item's width to my listbox width with no luck.
It turned out that the horizontal scroll bar was causing the issue (even though it wasn't visible)
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Solved my issue

LongListSelector centered items unexpected position change

I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance

WP scrolling issue with listbox and scrollviewer

Hi I am trying to get my UI have scrolling in partial page having a list. Here's my code -
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTerm" Text="potato" Width="379" />
<Button x:Name="btnSearch" Content="Go" Click="btnSearch_Click" />
</StackPanel>
<TextBlock x:Name="noResultsTxt" Visibility="Collapsed" Margin="10, 30, 0, 0" Text="No results found! try different search term" Style="{StaticResource PhoneTextNormalStyle}" />
<ScrollViewer Height="520" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="itemlist" SelectionChanged="itemlist_SelectionChanged" Margin="0,10,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<TextBlock Text="{Binding Title}" FontSize="35" FontWeight="Normal"/>
<TextBlock Text="{Binding CommaCategories}" FontSize="20" FontWeight="Light" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Doesnt seem to be scrolling at the List area. i seem to have figured out that the issue is with Scrollviewer not able to interact where ListBox exists. I verified that the scrolling is happening perfectly fine by setting IsHitTestVisible property of ListBox to be false.
Can someone help me out!
Answering my own question! Just as AMR commented it, I figured out that I don't need the scroll viewer, I just set the height of ListBox and scrolling worked fine! :)
On why external scrollviewer wont work with Listbox - https://stackoverflow.com/a/1294786/729032

How can I add a border without any effect on the other controls?

I tried surrounding my grid with a border this way:
<Border BorderBrush="Black" BorderThickness="2">
<Grid>. . .</Grid>
</Border>
...but when I do that, the TextBlock that formerly was at the top of my page, as well as the other Grids, get pushed all over the canvas - the Border surrounds my grid perfectly, but it causes these side effects. How can I add a border without any effect on the other controls?
My XAML is:
StackPanel
Grid with 3 columns and four rows)
TextBlock (GridRow=0, GridCol=0, GridColSpan=3)
Grid (GridRow=1)
Grid (GridRow=2)
Grid (GridRow=3)
UPDATE
Thanks to Davut; this is what works pretty well:
<Border Grid.Row="1" Padding="4" Margin="4" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Border Grid.Row="1" Padding="4" Margin="4" Grid.Column="1" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Border Grid.Row="1" Padding="4" Margin="4" Grid.Column="2" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />