I've put a WebView inside of a FlipViewItem. The problem seems to be that in WP 8.1, the WebView does not get the gestures (presumably because they're absorbed by the FlipView). The desired result is to be able to scroll vertically and tap in the WebView but also to be able scroll horizontally for the FlipView (even if just in a limited area on the horizontal edges). Is there any solution or workaround for this?
<StackPanel>
<StackPanel Name="postTitle" Background="Transparent">
<TextBlock Name="ContentArea" Text="" FontSize="18" Margin="10, 5, 10, 0" TextWrapping="WrapWholeWords" FontWeight="Bold" Foreground="White"/>
<TextBlock Name="SubArea" Text="" FontSize="16" Margin="10, 0, 10, 10" TextWrapping="WrapWholeWords" Foreground="White"/>
</StackPanel>
<FlipView Name="swipeArea" Height="460" Margin="0" Padding="0" SelectedIndex="1" SelectionChanged="swipeArea_SelectionChanged">
<FlipViewItem Name="oneItem">
</FlipViewItem>
<FlipViewItem Name="mainFlipViewItem">
<Grid>
<ProgressRing Name="progRing" Foreground="White" Margin="0,25,0,0" Background="Transparent" Visibility="Collapsed" VerticalAlignment="Top"/>
<WebView Name="InterWindow" Height="460" Visibility="Collapsed" DefaultBackgroundColor="#5E5E5E"></WebView>
<ScrollViewer Name="Scrollster" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="8" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Name="WebWindow" Height="420" HorizontalAlignment="Center" VerticalAlignment="Top">
</Image>
</ScrollViewer>
</Grid>
</FlipViewItem>
<FlipViewItem Name="threeItem">
</FlipViewItem>
</FlipView>
</StackPanel>
I believe I just found one workaround. I've added this to the WebView control:
Canvas.ZIndex="1000"
I can then set the width of the WebView control to something just slimmer than the FlipView itself, and then I should be good.
Related
I like to create rounded corner for my video in Windows phone 8 app development.How to get this?
I have tried this below code
<Border x:Name="border" BorderThickness="1" BorderBrush="#FF000000" CornerRadius="20" Padding="1"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Border Name="mask" Background="Transparent" CornerRadius="{Binding ElementName=border, Path=CornerRadius}"/>
<Grid>
<Grid.OpacityMask>
<VideoBrush SourceName="{Binding ElementName=mask}"/>
</Grid.OpacityMask>
<MediaElement x:Name="Media" HorizontalAlignment="Left" Height="128"
VerticalAlignment="Top" Width="236" Source="/Assets/Videos/empty.m4v"/>
</Grid>
</Grid>
</Border>
I have a scrollviewer with an item template on it. the user sends a control number and I need to scroll to that item. How can I find the offset for the scrollviewer?
here is the scrollviewer that I am using
<ScrollViewer Grid.Row="0" x:Name="ScrollPanel" Padding="0">
<Grid x:Name="TestPanel" >
<ItemsControl x:Name="MainItemsControl" ItemsSource="{Binding PostList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="PostPanel" Margin="0,5,0,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="IconUrl" Source="{Binding IconUrl}" Grid.Row="0" Grid.Column="0" Margin="12,0,12,0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50"/>
<StackPanel Grid.Row="0" Grid.Column="1">
<TextBlock x:Name="PostAuthorName" Text="{Binding PostAuthorName}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PostTime" Text="{Binding PostTime}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<TextBlock x:Name="ReplyNumber" Text="{Binding ReplyNumber}" Grid.Row="0" Grid.Column="2" TextWrapping="NoWrap" Foreground="Black" Margin="12,0,12,0" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Center"/>
</Grid>
<RichTextBox x:Name="PostContent" localcontrols:Properties.BBCode="{Binding PostContent}" />
<Rectangle Grid.Row="1" Fill="Gray" Height="1" HorizontalAlignment="Stretch" Margin="0,10,0,10"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
The offset can be calculated in this way. The code is adopted from this answer.
void ScrollToIndex(int index)
{
var itemContainer = MainItemsControl.ItemContainerGenerator.ContainerFromIndex(index) as UIElement;
GeneralTransform transform = itemContainer.TransformToVisual(ScrollPanel);
Point position = transform.Transform(new Point(0, 0));
ScrollPanel.ScrollToVerticalOffset(position.Y);
}
The ItemsControl does not implement logic that allows scrolling to a particular item. You can use the ListBox control instead. This control has a ScrollIntoView method that accepts the object you would like to scroll to as an argument. You can still use the RadWrapPanel by setting the ItemsPanel property of the ListBox control.
You don't have properties, but you have two methods for this: ScrollToVerticalOffset (to scroll vertically) and ScrollToHorizontalOffset (to scroll horizontally).
this.scrollViewer2.ScrollToVerticalOffset(0);
Im having Listview which shows 185 columns and 15 rows. For showing 185 columns with 15 rows, windows store app takes some time or UI gets freezes. below is the code Im using for showing data
<ListView x:Name="outerlstView"
Height="650"
Margin="2,24,10,10" Grid.Row="1"
Grid.Column="1" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ItemsSource="{Binding Data,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionMode="None" ShowsScrollingPlaceholders="True" IsZoomedInView="False"
IsSwipeEnabled="False" IsItemClickEnabled="False"
ItemContainerStyle="{StaticResource LvItemStyle}"
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel
Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<ListView SelectionMode="None" IsZoomedInView="False" IsHoldingEnabled="False"
IsSwipeEnabled="False" x:Name="ListRow" ItemsSource="{Binding data, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch" Width="Auto" Height="Auto"
VerticalAlignment="Center" ItemContainerStyle="{StaticResource LvItemStyle}" AllowDrop="True"
ShowsScrollingPlaceholders="True">
<interactivity:Interaction.Behaviors>
<awbehaviors:DragBehaviour/>
</interactivity:Interaction.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="35" Width="120" HorizontalAlignment="Center" >
<Rectangle StrokeDashArray="1 1 0.3 1" Height="30" VerticalAlignment="Top" IsHitTestVisible="False" Opacity="0.5" Stroke="White" StrokeThickness="1" Margin="0" StrokeEndLineCap="Square" StrokeDashOffset="1.5"
Fill="{Binding ElementName=ListRow,Path=Tag,Converter={StaticResource RowNotoBackgroundConverter}}"/>
<TextBlock Text="{Binding FeedCellData,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left"
tyle="{StaticResource GridItemTextStyle}" Width="120" AllowDrop="True" Padding="1" TextWrapping="NoWrap"
VerticalAlignment="Top" Tag="{Binding ElementName=ListRow,Path=Tag}" ToolTipService.ToolTip="{Binding FeedCellData}"
Height="{Binding Path=Tag, RelativeSource={RelativeSource Mode=Self},Converter={StaticResource RowtoHeightConverter }}" >
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Margin="0,0,0,0" Width="Auto" Orientation="Horizontal" Height="35" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
the above code has listview inside it another listview. when i try to load list<list> to listview it takes too much of time. Some time app crashes when i load 100 rows with 185 columns.
I tried to replace Itemtemplate stye control to Itemstackpanel performance is good. data is loaded and shown on screen faster but i dont see Horizontal scroll
Previous Code
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel
Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
when i modify to `<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Margin="0,0,0,0" Width="Auto" Orientation="Horizontal" Height="35" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>`
i dont see horizontal scrollbar enabled. Can any1 suggest me how to enable Horizontal scroll bar enabled by default to Itemstackpanel in windows store apps.Looks like it is bug with this control or there work arounds to ItemsStackpanel with Horizontal Scrollbar.
If your ItensSource is a list of objects with a attribute Name and a attribute Price for example:
<ListView ItemsSource="{Binding Here_your_DataSource}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="15"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<!--Here u design your item template-->
<StackPanel Background="Blue" Width="100" Height="100">
<TextBlock Text="{Binding Name}"></TextBlock>
<TextBlock Text="{Binding Price}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have a Images page images are loading from my random urls into my ListBox, I have ApplicationBar in this page and i have created two buttons one for library page show in grid format and Second for library page in list format, by default my Library View in Grid format now i want to show its view in the list format by clicking a button from the application bar.
I have tried the converters to convert the orientation of my ListBox's stackPanel but not worked.
I have tried the change the orientation by fetching the x:Name property of the ListBox but not worked.
i searched on google by putting following query but not found proper solution.
"How to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8"
I am showing my ListBoxPage.xaml.
<ListBox Name="listCloudBooks" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tools:WrapPanel Orientation="Horizontal">
</tools:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgBookImage" Source="{Binding CLover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="80" Height="100"/>
<StackPanel Orientation="Horizontal">
<TextBlock Visibility="{Binding IsVisible}" Text="{Binding prgo}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding FName}" FontFamily="Segoe UI" FontSize="13.5"
Foreground="White" TextTrimming="WordEllipsis"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<TextBlock Text="{Binding LName}" FontSize="13.5" FontFamily="Segoe UI"
Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center" Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}" CharacterSpacing="2"/>
<Button Content="Hello" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton,
Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5"
FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top"
Foreground="White">
</Button>
<Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
<Button x:Name="btnDeleteBook" Click="btnDeleteBook_Click"
Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0"
Height="55" Width="55"
<Button.Background>
<ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you have any idea how can we do that than please let me know.
I have found the alternate solution of it, what i am doing i have created two ListBox with different Name Property and made the visibility="Collapsed" and Orientation="Horizontal". And in second ListBox i created with different Name and Visibility Property="Visible" and assigned the orientation="Vertical".
So on btnList i am playing with Visibility only.
I have placed a Progress Bar control within my MainPage.xaml. The application type is Pivot.
For some reason, the Progress Bar and a TextBlock which I have placed within a PivotItem and below a Grid are not showing. There is a LongListSelector directly beneath these two controls. Are these two controls not showing because of that? I used the UI to drag the LongListSelector beneath then anyway, so I'm not sure why it's not showing.
This is the XAML:
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" Margin="0,0,0,579"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" Margin="0,24,0,541" />
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0">
<phone:LongListSelector.ItemTemplate>
...
...
...
As you can see, there is a ProgressBar and a TextBlock above the LongListSelector who are also inside the Grid control.
Any ideas why these two controls are not showing?
I think you have something wrong with Margin or item positioning. I've tested code below and it works:
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" VerticalAlignment="Center" Margin="0"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black"
HorizontalAlignment="Center" Text="Something"/>
</StackPanel>
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
Remove margin of all child element of StackPanel. This will defiantly helps you.
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<StackPanel>
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
<phone:LongListSelector.ItemTemplate>
</StackPanel>
</Grid>
</phone:PivotItem>
</<phone:Pivot>
Hardcoding control's position (especially by dragging controls in designer) is not a good practice. Try to define rows for your Grid, then specify Grid.Row for controls inside the Grid. With that you can arrange Grid content more neatly. Check this link for more sample and explanation about layouting controls inside Grid. Following is an example for your situation :
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" />
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
</StackPanel>
<phone:LongListSelector Grid.Row="1" Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
<phone:LongListSelector.ItemTemplate>
...
...