I'm trying to arrange UI Responsive in all uwp platform But some issue arises
,I'm new to uwp development .Any idea how to implement look same in windows 10 mobile ,tabs and desktop.
Xaml code
<Grid Name="HomeView" >
<Grid.Background>
<ImageBrush ImageSource="Assets/Home/home_android.jpg"/>
</Grid.Background>
<StackPanel>
<MediaElement x:Name="mycontrol" Source="/Audio/bg_sound.mp3" AutoPlay="True"/>
</StackPanel>
<StackPanel>
<MediaElement x:Name="mediaElement1" />
</StackPanel>
<RelativePanel>
<Image Source="Assets/Home/btn_learn_colours.png"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="20,90,0,60"
Width="180" Height="200"
Tapped="L_color_tap"/>
<Image Source="Assets/Home/btn_paint.png"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="220,90,0,0"
Width="180" Height="200"
Tapped="Paint"/>
<Image Source="Assets/Home/btn_quiz_f.png"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="440,60,0,0"
Width="180" Height="200"
Tapped="Quiz"/>
<Image Source="Assets/Home/btn_other_apps.png"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="440,140,0,0"
Width="180" Height="200"
Tapped="Other_Apps"/>
</RelativePanel>
</Grid>
Related
I'm struggling to vertically center text using TextBlock. I know that it adds extra space above the space in case you use accents but why it isn't consistent with the space below then? There's a few extra pixels.
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,40,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" Text="0" FontFamily="Courier New" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Grid Padding="4,8" BorderThickness="8,0" Width="104">
<TextBlock x:Name="TextBlockMinutesLeft" Text="00" HorizontalAlignment="Left" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" TextAlignment="Center" Height="27" TextLineBounds="Tight" Margin="0,0,4,0" />
<TextBlock x:Name="TextBlockSecondsLeft" Text="30" HorizontalAlignment="Right" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" />
</Grid>
<Grid Width="41" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockRemoteScore" Text="0" HorizontalAlignment="Center" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" Foreground="#FFFF3B30" />
</Grid>
</StackPanel>
I've played with Line Height and Text Line Bounds but I can't why a way to make the text still vertical centered once I change the font.
Updated code to reproduce issue:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="51" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<StackPanel Padding="4" BorderThickness="8,0" Orientation="Horizontal">
<TextBlock Text="01" FontFamily="Courier New" FontSize="36" TextAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0" />
<TextBlock Text="11" FontFamily="Courier New" FontSize="36" TextAlignment="Right" VerticalAlignment="Center" />
</StackPanel>
<Grid Width="51" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
You should have a play with these two properties. In your case you are probably more interested in TextLineBounds.
<TextBlock Text="80" FontSize="40" TextLineBounds="Tight" OpticalMarginAlignment="TrimSideBearings" />
Update
I am not sure if your screenshot is 100% accurate. I have used your code to produce the following pictures. Note I have scaled them up by 10 times.
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" TextLineBounds="Full" Text="80" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Top" Width="1" Margin="-21,0,0,0" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Bottom" Width="1" Margin="-21,0,0,0" />
</Grid>
With TextLineBounds set to Tight
With TextLineBounds set to Full
Yes, on the first one, there's still a tiny little gap (about 0.3 epx) between the bottom edge of number 8 and the Line, but this is mostly due to layout rounding and effective pixel snapping. I don't think it's noticeable to human eyes. :)
P.S. You cannot purely rely on checking the visuals from Blend Designer as sometimes the artboard doesn't get updated on time to give you the correct result. You should always run your app and check from there.
I have tested your code and reproduced this behavior. If your have not set the height and width of TextBlock, it will set them based on your text font size automatically .
For example, If the FontFamily is Courier New and the font size is 25, and the actual width and height of TextBlock is 16.00244140625 , 29.3203125. It will generate deviation when you center the text vertically. However, you could manual correct it via modifying the Padding just like the follow
How can I add shadow effect in Windows universal app?
I have added Image into StackPanel. I want to add shadow effect to that control (StackPanel).
I am trying to do something like below image.
This should give you the inspiration to arrive at something you like.
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Width="100" Height="100" Margin="0,10">
<Image Source="PinkSquare.png" Width="95" Height="95" HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.5"/>
<Image Source="PinkSquare.png" Width="95" Height="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
<Grid Width="100" Height="100" Margin="0,10">
<Image Source="GraySquare.png" Width="95" Height="95" HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.5"/>
<Image Source="PinkSquare.png" Width="95" Height="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
Add borders, rounded corners, gradients, etc. to achieve the final look you like.
I am developing a universal application in Visual Studio 2015 Community, but I have a problem in stretching my 3 buttons when I test my application on local PC or the Windows phone emulator, this is what I get with my code:
<CommandBar Height="51" >
<CommandBar.Content>
<Grid>
<StackPanel>
<Image x:Name="image1" Margin="41,10,-168,-50" Source="images/name.png" RenderTransformOrigin="0.487,0.82"/>
<Image x:Name="image" Margin="1,0,-40,-50" Source="images/icon.png"/>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-244,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Button.Content>
<Image Source="images/home.png" Margin="-9,0.333,-9,-0.667"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-280,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/search.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-315,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/profil.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
</Grid>
</CommandBar.Content>
This what I want to get:
This is going to get you there:
<!--Content Alignment is left by default!-->
<CommandBar HorizontalContentAlignment="Stretch">
<CommandBar.Content>
<Grid>
<!--Left element-->
<Rectangle Margin="10" Height="35" Width="35" Fill="Red"
HorizontalAlignment="Left"/>
<!--Right elements together in a horizontal StackPanel-->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
First up, you tagged your question inside several different area's, so it's difficult for us to tell what platform you are on. Is it a WinRT 8.1 app or a UWP windows 10 app?
But for reference, if it's a UWP Win10 app, first try to use following XAML, it creates a CommandBar with 1 primary command. And on the UWP platform that will position the icon at the right of the screen.
<CommandBar IsOpen="True" IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Add" />
</CommandBar.PrimaryCommands>
</CommandBar>
More info on what and how items are displayed inside a commandbar can be found on MSDN here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx
There are a few issues with what you're trying.
The XAML you have is more complicated than it needs to be.
You've tried to align controls by setting margins - this doesn't work with
variable sized containers.
You're not using any of the functionality of the CommandBar so you probably don't need it.
Instead you can make the layout you desire with a simple grid.:
<Grid VerticalAlignment="Top" Height="51">
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image1" Source="images/name.png" />
<Image x:Name="image" Source="images/icon.png"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button >
<Image Source="images/home.png" />
</Button>
<Button>
<Image Source="images/search.png" />
</Button>
<Button >
<Image Source="images/profil.png" />
</Button>
</StackPanel>
</Grid>
I'm trying to add Buttons to my Scrollviewer, my result so far is negative, scrollviewer will not work. I tried wrapping around stackpanels but no luck. Can anyone guide me in the right direction? Thanks,
<ScrollViewer Name="flippy" Grid.Row="1" >
<Grid Width="Auto" Height="Auto" MinWidth="1366" MinHeight="668" Name="GridA" Grid.Row="1">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.png" Stretch="None" />
<StackPanel Height="150" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal">
<Button Content="button1" HorizontalAlignment="Left" VerticalAlignment="Center" Height="180" Width="179" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/storA.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="button2" HorizontalAlignment="Right" VerticalAlignment="Center" Height="140" Width="121" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/litenA.png"/>
</Button.Background>
</Button>
</StackPanel>
<StackPanel Height="103" Width="557" VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
<Button Content="button3" HorizontalAlignment="Center" VerticalAlignment="Center" Height="103" Width="553">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png"/>
</Button.Background>
</Button>
<Image Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png" />
</StackPanel>
</Grid>
</ScrollViewer>
My StackPanel which is inside a ScrollViewer isn't scrolling for some reason.
Code:
<ScrollViewer Height="478" Name="scrollerButtons" Width="Auto" Canvas.Left="668" Canvas.Top="2" VerticalAlignment="Bottom" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" HorizontalAlignment="Left">
<StackPanel Name="stackPanelButtons" Orientation="Vertical" Canvas.Left="162" Canvas.Top="43" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto">
<Image Height="60" Name="imgA" Source="Images/a.png" Stretch="Fill" Width="60" Tap="imgA_Tap"></Image>
<Image Height="60" Name="imgB" Source="Images/b.png" Stretch="Fill" Width="60" Tap="imgB_Tap"></Image>
</StackPanel>
</ScrollViewer>
Change ScrollViewer.VerticalScrollBarVisibility="Disabled" from Disabled to Auto.