I've got a Scrollviewer which has a StackPanel (which contain ExpanderViews)
I'm updating the ScrollViewer VerticalOffset when the ExpanderViews are expanded. However the Scrollviewer doesn't scroll up at all.
The only time the scrollviewer scrolls to a vertical offset is from within FScrollViewer_LayoutUpdated() method. (This is tied to the LayoutUpdated event of ScrollViewer)
Is there any way to update the VerticalOffset (or ScrollToVerticalOffset) from another method?
<Grid x:Name="FilterGrid" Height="696" Grid.Row="0" Background="White">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="FScrollViewer" toolkit:TiltEffect.SuppressTilt="True" LayoutUpdated="FScrollViewer_LayoutUpdated"
MouseMove="FScrollViewer_MouseMove" Width="{Binding ElementName=FilterGrid, Path=ActualWidth}" Height="{Binding ElementName=FilterGrid, Path=ActualHeight}" >
<StackPanel Name="StackPanel" Margin="50,0,0,0" >
<StackPanel x:Name="Header" Height="65" Orientation="Horizontal" Background="Transparent" >
<TextBlock x:Name="HeaderTextBlock" Text="Random text" Style="{StaticResource PhoneTextTitle2Style}" TextTrimming="WordEllipsis" FontWeight="SemiBold" Foreground="Black" Margin="60,5,5,5" VerticalAlignment="Center"/>
</StackPanel>
<Line Width="Auto" StrokeThickness="1.5" Stretch="Fill" Stroke="Gray" X1="2" />
</StackPanel>
</ScrollViewer>
</Grid>
Related
I have a TopAppbar and BottomAppBar in my universal app,I want to create the same AppBars in my windows phone 8,this is my code:
<Page.TopAppBar>
<CommandBar HorizontalContentAlignment="Stretch" Background="#FF00AEEF">
<CommandBar.Content >
<Grid>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" >
<Image Margin="2" Height="35" Source="images/4.png" Width="35"/>
</StackPanel>
<Button VerticalAlignment="Stretch" Background="#FF00AEEF" x:Name="HomeBtn" Click="HomeBtn_Click">
<StackPanel Orientation="Horizontal">
<Image Source="images/berry.png" Height="35" Width="35" />
<TextBlock Text="BarBerry" Foreground="White"></TextBlock>
</StackPanel>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button VerticalAlignment="Stretch" Background="#FF00AEEF" Style="{StaticResource CustomButtonStyle}" Margin="5,0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Contact" Foreground="White"></TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
</Page.TopAppBar>
<Page.BottomAppBar>
<CommandBar Background="#eff0f2" HorizontalContentAlignment="Stretch">
<CommandBar.Content>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch">
<Image Source="images/world.png" Height="35" Width="35" Margin="5,0"/>
<ComboBox Margin="2" BorderThickness="0" SelectedItem="test" x:Name="combo">
<ComboBoxItem Content="test" />
<ComboBoxItem Content="test1" />
</ComboBox>
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
</Page.BottomAppBar>
but the problem is that,I get only the BottomAppBar displayed,is it possible to define in windows Phone 8 a Top and a Bottom AppBars,should I use a StackPanel in place of the Top appBar?
thanks for help
You can't create the Top App Bar in windows phone. Because their is only Bottom App Bar is defined in the Windows phone project. So you can only define the bottom app bar in windows phone.Yes you can use the Stack panel instead of Top App bar but i think this is not a good idea to implement that kind of functionality in windows phone :).
Grid Structure
Load
When click on textbox and open keypad then title scroll up..I want to fix the title place (not scroll)
how to resove this problem?
when click on textbox keypad opened but title scroll up...
My xaml code
<Grid x:Name="grdEmergencyServices" ScrollViewer.VerticalScrollMode="Disabled" >
<Grid.Background>
<ImageBrush ImageSource="/Assets/1.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="500*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="#8C6446" Grid.Row="0" Grid.ColumnSpan="3"/>
<Grid Grid.Row="0" Background="#8C6446" Opacity="0.8">
<TextBlock Name="pageTitle" Text="Title Name" Style=" {StaticResource CommonStyle}"/>
</Grid>
</Grid>
<ProgressRing Grid.Row="1" x:Name="ProgressRingLoad" Visibility="Collapsed" Background="Transparent" IsActive="True" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ScrollViewer Grid.Row="1" Margin="20">
<TextBox TextWrapping="Wrap" Text="TextBox" Margin="0,500,0,0"/>
</ScrollViewer>
</Grid>
I have designed an expanderview in windows phone.
And now I want to select the expanded item and navigate it to other page.How to navigate it.
My Xaml code for expanderview
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="TeluguOne"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Videosongs" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ExpanderView Header="Latest movies" x:Name="expander"
Margin="0,0,0,20" FontSize="35"
Style="{StaticResource ExpanderViewStyle1}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Julayi" Foreground="Gray" />
<TextBlock FontSize="25" Text="ShiridiSai" Foreground="Gray" />
<TextBlock FontSize="25" Text="Srimanarayana" Foreground="Gray" />
<TextBlock FontSize="25" Text="Sudigadu" Foreground="Gray" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView Header="New movies" FontSize="35" x:Name="expander1"
Margin="0,0,0,20"
Style="{StaticResource ExpanderViewStyle3}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Dookudu" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Mr.Perfect" Foreground="Gray" />
<TextBlock FontSize="25" Text="Raccha" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Teenmar" Foreground="Gray" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView Header="Old movies" FontSize="35" x:Name="expander2"
Style="{StaticResource ExpanderViewStyle2}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Mayabazar" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Alluddin Adbhutha Deepam"
Foreground="Gray" TextWrapping="Wrap"/>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
</Grid>.
MY screenshot of the expaderview is
In the above screenshot i need to select julayi and one after the other movies and navigate to other page.
Please anybody help me how can I select the expanded items and perform events on it.
Many Thanks
I have below code
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<TextBlock x:Name="ApplicationTitle" FontWeight="Bold" Padding="20,0,0,0" Grid.Row="0" Text="فرآن کریم"/>
<ListBox x:Name="myListBox" Grid.Row="1" Padding="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Background="{Binding Converter={StaticResource AlternateRowConverter}}" Tap="pQuranAya_Tap">
<TextBlock Width="Auto" Text="{Binding Aya}" Foreground="Black" FontSize="50" Padding="20,0,0,20" TextWrapping="Wrap" Tap="TextBlock_Tap" />
<StackPanel Background="Black" />
<TextBlock Width="Auto" Text="{Binding AyaTranslation}" Foreground="Black" FontSize="35" Padding="20,0,0,20" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want textblock should be always in window size, but its text size. How can I make it to fill the window size?
Thanks,
Remove <TextBlock Width="Auto" and add <TextBlock HorizontalAlignment="Stretch". After that, your textblock will fit the parent container (window, grid, stackpanel).
Remove Padding="20,0,0,20" And Margin (if You have in that Code )
I'm new to Windows phone 8 development and I am having difficulty with a panorama view.
When I create a basic 'Windows Phone Portrait Page' I have no difficulty creating grids and aligning Toolbox controls between those grids.
However, with the Panorama page, when I create grids, those grids are applied to every page in the panorama and therefore I cannot use different layouts for each page.
How would I achieve different layouts on my panorama page?
Should I be using a WindowsPhoneControl instead?
Thanks for your time.
<phone:PhoneApplicationPage
x:Class="SmarterPower.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
<!--Panorama control-->
<phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3">
<phone:Panorama.Background>
<ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" VerticalContentAlignment="Top" VerticalAlignment="Top">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="menu"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432">
<!--Replace rectangle with image-->
<Image Source="{Binding Image}" />
<StackPanel Width="311" Margin="8,-5,0,5">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="0,5,10,0" Style="{StaticResource PhoneTextSmallStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
You should define your rows and columns in a Grid control inside a panorama item, instead of defining them in the layout root grid:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama Title="My Panorama" >
<!--Panorama item one-->
<phone:PanoramaItem Header="item 1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item 2">
</phone:PanoramaItem>
</phone:Panorama>
</Grid>