I have create a usercontrol for a splash screen to display when my app starts see code below. But the problem is that the text and prograss bar I want display on top of it doesn't display. I can't figure out what I've done wrong here? It's probablly something simple!
code:
<UserControl
x:Class="ContosoSocial.SplashScreenPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" >
<Image Stretch="Fill" VerticalAlignment="Top" Width="480" Source="SplashScreenImage.jpg"></Image>
<TextBox HorizontalAlignment="Left"
TextAlignment="Center"
Height="60"
Margin="14,630,0,0"
TextWrapping="Wrap"
Text="App & Database..."
VerticalAlignment="Top"
Width="456"
AcceptsReturn="True"
FontSize="16"
BorderBrush="{x:Null}"
Background="{x:Null}"
Foreground="White"
SelectionBackground="{x:Null}"
SelectionForeground="{x:Null}"/>
<ProgressBar HorizontalAlignment="Left"
Height="10"
Margin="10,680,0,0"
VerticalAlignment="Top"
Width="460"
IsIndeterminate="True"
Foreground="White"/>
<ProgressBar HorizontalAlignment="Left"
Height="10"
Margin="10,695,0,0"
VerticalAlignment="Top"
Width="460"
FlowDirection="RightToLeft"
Foreground="White"
IsIndeterminate="True"/>
<!--TitlePanel contains the name of the application and page title-->
</Grid>
The control run fine in Visual Studio window, I can see the text and progress bars running on top on the splash screen image.
Your code is working perfectly. Just add
Background="{StaticResource PhoneChromeBrush}"
in your LayoutRoot Grid since you text seems to be white in color. You can refer the source code which I tried.
Related
I want to develop app which is targeting to Multi resolution Device i Windows Phone(i.e. : 480*800 to 1080*1920)
this is my code for list box
<ListBox x:Name="LstContact">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#cbc6c0"
BorderThickness="0,0,0,2"
Margin="10">
<Grid >
<TextBlock Text="{Binding FirstName}"
Foreground="Black"
FontSize="22"
Margin="10" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And output should be like this
please help to that
It is Silverlight, so just put something like Width="480" to your Border and you are done.
I have a slider within a user control. When testing it out, the slider won't move if it is kept within the user control but works outside of it. Is there something that's needed to make it work?
The XAML for the usercontrol:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="4,0,3,0" Grid.RowSpan="1">
<TextBlock Text="15 mins" VerticalAlignment="Center" FontSize="16" Margin="0,-11,0,0" TextLineBounds="Tight" Foreground="White"/>
<Slider Foreground="White" SmallChange="50" TickFrequency="50" LargeChange="50" Background="#BFFFFFFF" Value="50" Margin="5,0" VerticalAlignment="Center" Width="250" StepFrequency="50" Maximum="100" ValueChanged="Slider_ValueChanged"/>
<TextBlock Text="1 hour" VerticalAlignment="Center" FontSize="16" Margin="0,-11,0,0" TextLineBounds="Tight" Foreground="White"/>
</StackPanel>
<ListBox x:Name="TimesList" DataContext="{Binding}" Background="{x:Null}" Foreground="White">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="365" DataContext="{Binding}">
<TextBlock Foreground="White" Text="{Binding}" HorizontalAlignment="Stretch" FontSize="29.333"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Border Grid.RowSpan="2" BorderBrush="#B2FFFFFF" BorderThickness="2,0,2,2" Padding="0" Margin="-5,0,-5,-5"/>
</Grid>
I found that 60 pixels height is not enough for Slider control. That's why it doesn't work. But there are few easy ways to fix it. You can choose whatever fits your needs.
Option 1
Change the first row definition height to Auto. So the Grid will as high as the Slider control. It's 84 pixels.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Option 2
The way you use Grid layout makes it pretty much the same as StackPanel. So you could also replace this Grid with StackPanel.
Option 3
You na change Sldier's margins to fit 60 pixels height. Set the bottom margin to -24.
<Slider Foreground="White" SmallChange="50" TickFrequency="50" LargeChange="50" Background="#BFFFFFFF" Value="50" Margin="5,0,5,-24" VerticalAlignment="Center" Width="250" StepFrequency="50" Maximum="100" ValueChanged="Slider_ValueChanged"/>
I have a page witch a fixed title followed by a content and a textbox that enables the user to post to my app. When the user press the textbox the keyboard shows up and all the control slide up making impossible for the user to scroll then back?
How can I make the controls float under the keyboard so the user can scroll it.
I have tried witch grids and scrollviewers without success :(
My layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto " />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Width="Auto" Height="50" Fill="Red" />
<Grid Grid.Row="1">
<Rectangle Height="600" Fill="Green" VerticalAlignment="Top" />
</Grid>
<TextBox Grid.Row="1" Width="Auto" Background="Black" VerticalAlignment="Bottom" />
</Grid>
This is what is happening
This is what i expect to happen
The following article explains how to resolve the issue by manipulating the transformations done by the OS to the page.
http://klingdigital.net/2013/06/scrollviewer-and-multiline-textbox-windowsphone/
I'm developing a windows phone 8 application.
I've got a textblock with a price in it.
Only thing I want to do is a line through the textblock.
I've tried to use the Line function but that one doesn't work because the textblock has a variable length.
Does anyone know how I can make this happen?
This worked for me thanks to Chkon for giving me the answer in this thread:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Some text" VerticalAlignment="Top" Grid.RowSpan="2"/>
<Border BorderThickness="0,0,0,1" BorderBrush="#FF949494" >
</Border>
</Grid>
Here is how my Pivot control looks on my WP app.
here is the code for same.
<phone:Pivot>
<!--Pivot item one-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/alarmClock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello1"/>
</Grid>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem >
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/clock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<!--Pivot item three-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/timer.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
I want to customized how the header looks. This is how i want the headers to align itself (see below image). I am not sure how it is to be done. Below is how i want it to look with the black grid and vertical pipes. Can anyone help me with this ? I think i will have to write a Style for same. However, I don't know in which way i can defined a style so that alignment is changed as per below.
The closer to what you want to achieve is this with no much effort:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PivotHeader">
<Grid Margin="-11,0,-11,0">
<Border BorderBrush="#FFF70000" BorderThickness="1">
<Grid Width="152" HorizontalAlignment="Center">
<Image Height="80" Source="{Binding}"></Image>
</Grid>
</Border>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot HeaderTemplate="{StaticResource PivotHeader}">
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 1"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>
However you will notice that a Pivot Control does not work like tabs on Android and iPhone.
I wouldn't recommend changing the behavior of the pivot control in Windows Phone either.
Maybe the best way to achieve what you are trying to do is to use buttons at the top of a pivot page and manually handle their behavior by modifying pivots selection changed.