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.
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
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>
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 have a strange issue, I tried every trick I knew to centre align the ListView placed inside a grid. No matter what, it looks like it is left aligned. The width and height of the ListView is data bound. (Width can take values 350 or 700 and height can take 100 or 200 depending on the Size settings. If size settings is compact it should be 350x100 and and if normal 700x200).
This is the xaml code
<Grid x:Name="GridPageLVPortrait" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Background="Beige" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,584.714,0" Width="781">
<ListView x:Name="PageLVPortrait" ItemsSource="{Binding}" CanReorderItems="True" AllowDrop="True" HorizontalAlignment="Center" SelectionMode="Single" IsSwipeEnabled="True" IsItemClickEnabled="True" SelectionChanged="PageLVPortraitSelectionChanged" ItemClick="PageLVPortraitItemClick" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" >
<ListView.ItemTemplate>
<DataTemplate>
<Canvas HorizontalAlignment="Center" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}">
<Canvas.Background>
<ImageBrush ImageSource="{Binding PageBackground}"/>
</Canvas.Background>
<Image HorizontalAlignment="Center" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" Source="{Binding Page}" Stretch="None" Opacity="1" CacheMode="BitmapCache" />
<StackPanel x:Name="EditDeleteStackPanel" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}" Opacity="0.95">
<Button x:Name="NoteDelete" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="{x:Null}" Tapped="NoteDelete_Tapped" MinWidth="50" MinHeight="50" Margin="0,0,10,0" BorderBrush="{x:Null}" >
<Button.Background>
<ImageBrush ImageSource="{Binding Delete}"/>
</Button.Background>
</Button>
<Button x:Name="NoteEdit" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe Script" FontSize="24" BorderBrush="{x:Null}" Tapped="NoteEdit_Tapped" Foreground="{x:Null}" MinWidth="50" MinHeight="50" Margin="0,0,10,0">
<Button.Background>
<ImageBrush ImageSource="{Binding Edit}"/>
</Button.Background>
</Button>
</StackPanel>
</Canvas>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Could someone kindly help?
I've tried your code, in a whole page Grid with the normal dimension convention you provided (700x200). The listview does get center aligned if I ignore the grid's Margin="0,0,584.714,0". If you need the 584px in the right of the page, I'd say better put a grid's column there with that width.
I had found the issue. It is because the main grid is spit into 4 columns. And since this one uses columnspan, the alignment gets messed up.
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.