a TopAppbar and BottomAppBar for WindowsPhone - windows-phone-8.1

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 :).

Related

Vertical alignment is not working -Windows Phone 8.1

Below is my XAML part of windows Phone 8.1.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<StackPanel Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
In this, I have tried to make the below part as vertical alignment to the bottom. But it doesn't work.
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
Please help me to solve this issue. Thank you
Most XAML containers like list views and stack panels fill from top to bottom and their height is equal to the sum of the heights of their contents.
If you've got something you want to appear at the bottom of the container you have the following choices:
Use a canvas of the desired dimensions and explicitly place each element on the canvas. This loses you a big benefit of XAML - namely that it reacts to changes in the available space and repositions elements for you.
Insert some padding into your layout to force elements to be in the place you want them to be. Again you might lose the ability to change view size etc.
You might find using a Grid rather than a StackPanel gives you a bit more control over placement - but again usually the row heights and column widths are governed by the sizes of the elements contained therein.
Use This code.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<Grid Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</Grid>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This might be work for you.

Strange Windows Phone ListBoxItem Layout

I have a ListBox in my XAML
<ListBox x:Name="ListBox" ItemTemplate="{StaticResource ListBoxDataTemplate}"
BorderThickness="0" />
ListBoxDataTemplate is
<DataTemplate x:Key="ListBoxDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="34" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" FontSize="18"
Grid.Column="0">A QUICK BROWN</TextBlock>
<Image Grid.Column="1" Margin="4,0,4,0"
Width="30" Height="30" Source="ms-appx:///Assets/Dark/icon.arrowright.png" />
</Grid>
</DataTemplate>
But when I run this on emulator, instead of the the Image align to right in row,
the Image position is right after Text A QUICK BROWN.
Here screenshot from emulator,
XAML code is here : http://pastebin.com/GVqC2Si9
Because your grid column for the image is only 34
change it to
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I would also add HorizontalAlignment="Right" to the image xaml
EDIT
tried your code and notice you had to add HorizontalContentAlignment
<ListBox x:Name="ListBox" ItemTemplate="{StaticResource ListBoxDataTemplate}" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

Disable the Grid vertical scroll-behavior of the scrollviewer 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>

ScrollViewer doesn't scroll to VerticalOffset

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>

textblock does not fill mobile phone window

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 )