Hello everyone i am facing a curious functionality of a scrollviewer.
i've got this longlistselector.
<phone:LongListSelector x:Name="ContactsGroupListSelector" Foreground="Black"
Background="Transparent"
ItemTemplate="{StaticResource GroupsItemTemplate}"
LayoutMode="List" IsGroupingEnabled="true"
HideEmptyGroups ="true"
ItemsSource="{Binding Items}"/>
and its getting populated with this dataTemplate
<DataTemplate x:Key="GroupsItemTemplate">
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Source="{Binding ImageSource}" Width="60" Margin="10,0,8,20" />
<ScrollViewer HorizontalScrollBarVisibility="Auto" Margin="0,0,8,0" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="Black" HorizontalAlignment="Left" Text="{Binding Name}" Tap="DisplayTheContactGroupClicked" VerticalAlignment="Top" Margin="0"/>
</ScrollViewer>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Background="#FF2A3136" IsZoomEnabled="false">
<toolkit:MenuItem Foreground="White" Header="delete group" Click="Delete" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</DataTemplate>
so the question. The scrollviewer doesnt scroll the entire textblock but only a chunk of it and i cant find out why.
If i set the StackPanel's orientation to Vertical it works as intended, but not in horizontal. Why?
Related
I found this question + answer to my problem here on stackoverflow, but for me its not totally clear where to change the
ListViewItemPresenter
I tried many things, but it seems like I cant find it on my own :(
Here is my XAML code for this frame:
<Page.Resources>
<DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource ItemListDataTemplate}"
>
</ListView>
</Grid>
Can someone help me our please? Thank you very much for your time!
There are two ways to edit ListViewItemPresenter in your Page:
You can copy the XAML Template from here (the first XAML codes block below Default Style). Add it to your Page.Resources. ListViewItemPresenter lies among those XAML codes, you can edit its Properties and this style will be applied to all the items of this page's ListView. Notes: don't add x:Key to this style.
Add a ListViewItem Control to your Page like below:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListViewItem></ListViewItem>
</Grid>
Document Outline->Select ListViewItem->Edit Template->Edit a Copy:
Remove the x:Key Property of generated Style Resource, so that this style will be applied to all ListViewItem. Then you can edit the ListViewItemPresenter in the generated XAML Resource.
Just add your DataTemplate inside of the Listview.
Put it in the ItemTemplate property.
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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.
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
I have a longlistselector inside a stackpanel, scrollviewer and pivot item.
The problem is no matter how I set the size of margin and borderthickness.
I couldn't get the border color visible.
This is the code I used:
<phone:PivotItem CacheMode="{x:Null}" Header="{Binding LocalizedResources.Settings_Appearance, Mode=OneWay, Source={StaticResource LocalizedStrings}}">
<ScrollViewer>
<StackPanel>
<TextBlock Text="{Binding LocalizedResources.Settings_Appearance_ContentExp, Mode=OneWay, Source={StaticResource LocalizedStrings}}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<phone:LongListSelector Name="ContentReaderExample" Height="100" BorderThickness="5" BorderBrush="{StaticResource PhoneAccentBrush}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Text}" FontSize="{Binding FontSize}" TextWrapping="Wrap"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
I had the same issue. I used a border around the LongListSelector and worked fine
I want to align the contents or items of ExpanderView in horizontal layout instead of vertical layout. The ExpanderHeader is set dynamically and also its contents are added dynamically.
The xaml part and CustomeItemTemplate in app.xaml is as below
<toolkit:ExpanderView
Width="470"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander"
Margin="5,10,5,10"
Foreground="#FF677389" FontSize="24" VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
</toolkit:ExpanderView>
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Horizontal" Height="60" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}"
TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150"/>
</StackPanel>
</DataTemplate>
Still i get the contents aligned vertically. Can someone point me what am i doing wrong here?
here is the sample code you have asked for
<Border BorderBrush="White" BorderThickness="1" Margin="5">
<ScrollViewer Width="Auto" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<toolkit:ExpanderView
Width="1600"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander" Margin="5,10,5,10" Foreground="#FF677389" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
</ScrollViewer>
</Border>
and my app.xaml has CustomItemTemplate definition as below
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Vertical" Height="100" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150">
<TextBox.InputScope>
<InputScope >
<InputScopeName NameValue="Number"></InputScopeName>
</InputScope>
</TextBox.InputScope>
</TextBox>
</StackPanel>
</DataTemplate>
I want to horizontally scroll only ExpanderView items. Rightnow it is scrolling but the whole ExpanderView is scrolling including its header. The header must be intact and only the items must scroll. How can i acheive it?
You should set the ItemsPanel for the ExpanderView control.
<toolkit:ExpanderView
Width="470" Height="100"
x:Name="taskNameExpander"
Margin="5,10,5,10"
FontSize="24" Background="White"
HorizontalAlignment="Left"
ItemsSource="1 2 3 4"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>