When applying a itemsControl i found that logical scrolling (canContentScroll="true") no longer seems t be working.
With logical scrolling i mean viewing item per item when clicking for example 2 navigation buttons that moves the scrollviewer.
The content of the itemControl is as the following:
<Grid Height="70" Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftScrollRow2" Width="Auto"/>
<ColumnDefinition x:Name="HorizontalContentRow2" Width="*"/>
<ColumnDefinition x:Name="RightScrollRow2" Width="Auto"/>
</Grid.ColumnDefinitions>
<RepeatButton Content="left" x:Name="btnLeft" Grid.Column="0" Style="{DynamicResource RepeatButtonStyleLeft}" Click="btnLeft_Click"></RepeatButton>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" x:Name="sv" CanContentScroll="True" Margin="0" Height="73" >
<ListBox x:Name="list1" ItemsSource="{Binding Reg, ElementName=Window}" Background="{x:Null}" BorderBrush="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="TestButton" HorizontalAlignment="Center" Height="71" Width="151"
Margin="5,0,10,0" Style="{DynamicResource ButtonStyleTest}"
Click="TestButton_Click"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</ScrollViewer>
<RepeatButton Content="right" x:Name="btnRight" Grid.Column="2" Style="{DynamicResource RepeatButtonStyleRight}" Click="btnRight_Click"></RepeatButton>
</Grid>
When i navigate the items that are being loaded in the stackpanel (buttons) only continues scrolling appears, and content slowly appears.
A possible solution to this would be using HorizontalOffSet but this involving giving a exactly distance which i think would not be a good solution at all.
Thanks in advance,
Jackz
I would go about this differently.
I would add the scroll bar in the style. Read this and see the note in the Scrollbar section.
http://www.wpfsharp.com/2012/03/18/itemscontrol-vs-listbox-vs-listview-in-wpf/
Related
I am new into WPF and I have problem as I mentioned in title.
I'm using ListBox.
When I click into row in first column. I cannot select value.
It works when I click on border of row.
In second column I have no problems.
This is how looks ListBox and Grid. And now how it's look running.
XAML code below
<Grid Grid.ColumnSpan="2" Margin="24,45,375,124" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListBox x:Name="ProductListView" Height="200" VerticalAlignment="Top" SelectionChanged="ListBox_SelectionChanged" AutomationProperties.IsColumnHeader="True" RenderTransformOrigin="0.508,0.5" Grid.ColumnSpan="2" Margin="2,0,-19,0">
<ListBox.GroupStyle>
<GroupStyle/>
<!--
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" HorizontalAlignment="Center"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
-->
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" x:Name="Nazwa_Produktu" />
<ColumnDefinition Width="100" x:Name="Cena_w_zl" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding PricePerUnit, StringFormat=\{0\} zł}" Grid.Column="1" HorizontalAlignment="Right" />
<ScrollViewer VerticalScrollBarVisibility="Hidden"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
The hidden Scrollbar seems to be overlapping with your first column, making the items inside unselectable.
I tested with your provided code and removed:
<ScrollViewer VerticalScrollBarVisibility="Hidden" />
This solved the issue you have mentioned!
Is there a reason why the hidden scrollbar has to be there?
I have this XAML on my windows phone:
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<StackPanel Margin="15,0,0,0" >
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<StackPanel x:Name="AccountsInfo" Grid.Column="1">
</StackPanel>
<StackPanel Grid.Column="2">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</phone:PanoramaItem>
In AccountsInfo Stackpanel I have like 5 accounts added programatically and RateChart is a chart. However, my rate chart should be below all the accounts and at the moment it is right in top of the screen and overlays first accounts. I don't know how to do the orientation.
Thanks for all the answers.
Looks to me like all you need is something like this. We get rid of the unnecessary panels, actually specify to your second StackPanel where it needs to be positioned within the parent Grid while ditching some unnecessary values on other properties. Hope this helps.
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto">
<RowDefinition Height="Auto">
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart"
Width="417"
Margin="0,25,0,0" />
</StackPanel>
</Grid>
</ScrollViewer>
</phone:PanoramaItem>
I have a page with lots of data so I need to use scrollviwer because of overflow items.
In this page I have something like list view (I made that) that has lots of items so I need to use scrollviewer for this list too.
So I have 2 vertical scrollviewer:
1) for all page items.
2) for My list view.
I made this app for windows phone 8.1. When I want to scroll in my list view I cant because of all page scrollviewer.
How can I solve that?
My code:
<ScrollViewer x:Name="ScrollViewerAllPage" Grid.Row="1" Grid.Column="0" Background="White" HorizontalScrollBarVisibility="Visible" ZoomMode="Disabled">
<Grid>
<StackPanel x:Name="StackMain" Orientation="Horizontal" Visibility="Collapsed">
...
<ScrollViewer x:Name="ScrollViewerReport" ScrollViewer.VerticalScrollMode="Enabled" Margin="32,0" Background="White" VerticalScrollBarVisibility="Visible" ZoomMode="Disabled" PointerPressed="ScrollViewerReport_PointerPressed">
<Grid x:Name="StackPanelReport" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="10,0" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="1" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="2" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Orientation = "Vertical">
...
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I am sorry for bad English.
Thanks.
There are a few aesthetic problems with my GUI that I can't quite figure out. The first one is my mouse over. I have a TextBlock with a MouseUp Event attached to it and I want the cursor to change to a hand when I mouse over so in the xaml I used Cursor="Hand" as shown below
<TextBlock Grid.Row="1" x:Name="AttachFileTextBlock" Foreground="Blue"
HorizontalAlignment="Right" FontSize="16" MouseUp="AttachFileTextBlock_MouseUp"
Cursor="Hand">
<Underline>Attach Screen Shots</Underline>
</TextBlock>
However the hand only appears around the edges and furthermore the actual text is not clickable, only clicking the edges trigger the mouse up event.
My other problem is in my UserControl, a HorizontalScrollBar is appearing even though I clearly set HorizontalScrollBarVisibility="Disabled" in my ScrollViewer
Here is the complete xaml
<UserControl x:Class="Client.App.Support.ListOfScreenShots"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="520" d:DesignWidth="800">
<Grid>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<ListBox Name="_listBox" ItemsSource="{Binding ''}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="550"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Image Name="_image" Grid.Column="0" Height="400" Width="550" HorizontalAlignment="Center" VerticalAlignment ="Center" Stretch="Uniform" Source="{Binding ''}"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Name="_addscreenshot" Content="Select Screenshot"
Height="30" Width="150" Margin="3.5,0,3.5,7"/>
<Button Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Name="_removescreenshot" Content="Remove Screenshot"
Height="30" Width="150" Margin="3.5,0,3.5,7"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
I am just starting to learn WPF in depth and I really really hate it right now. If this is supposed to be an improvement on other methods of creating UIs I can't even imagine what its predecessors were like. Hopefully it will all click some day.
I want to make a ListBox that arranges items horizontally. Each item should be a TextBox, and it should fill the list box vertically regardless how how much text is there. If you've used Tweetdeck, I'm aiming for a similar effect. Here's what I've got:
<ListBox
Background ="DarkGray"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemsSource="{Binding Path=Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="5" Margin="2,0,2,0">
<Grid Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Stretch"
Text="{Binding Path=Messages, Mode=OneWay}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What happens is that the TextBox stubbornly fits the text in it, rather than stretching vertically. I've tried switching the Grid for a DockPanel, which didn't help. I could bind the TextBox's Height property, but that seems unpleasant.
Is there a trick to this that I've missed?
You need to set VerticalContentAlignment="Stretch" on your ListBox.