Set spacing buttons - xaml

How do I put a space between the buttons? I am using Relative Panel, and I am the first button aligns with the center of the panel, and do not want the buttons to be together as is in the Picture:
<RelativePanel>
<Button Name="Button1"
Content="Button 1"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"/>
<Button Name="Button2"
Content="Button 2"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.Below="Button1"/>
<Button Name="Button3"
Content="Button 3"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.Below="Button2"/>
</RelativePanel>

One of the options is to set buttons margin.
For ex:
<Button Name="Button1"
Content="Button 1"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Margin="5"/>
It means that first button will have margin equal 5 pixels from each side.

Related

HorizontalAlignment not working for Image inside Button (UWP)

I have a button with an Image inside it
<Button BorderThickness="0" Background="Black" Grid.Column="0" Width="400" >
<Image HorizontalAlignment="Right" Height="20" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Width="20" />
</Button>
I want the image to be on the right end of the button so gave HorizontalAlignment="Right". But the Image always comes in the middle of the button. How can I fix this?
In the default style of Button, there is a ContentPresenter control to display the content of Button, it uses HorizontalContentAlignment property to control the horizontal alignment of the control's content. The default value is Center. So if you want to put the image in the right of Button, you can change the HorizontalContentAlignment to Right.
<Button HorizontalContentAlignment="Right" BorderThickness="0" Background="Black" Grid.Column="0" Width="400" >
<Image Height="20" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Width="20" />
</Button>

XAML babysteps. Using the child element to set a button background color

I have the following and am trying to use an alternative syntax to set the property element but the button now seems to be filling the whole page:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button
x:Name="bluebutton"
Width="100"
Height="40"
Content="Click Me" />
<!--Background="Blue"-->
<Button>
<Button.Background>
<SolidColorBrush Color="Blue" />
</Button.Background>
</Button>
</Page>
How do I still use this alternative syntax but apply the color to bluebutton ?
There are two buttons in your code. Perhaps you wanted to do this:
<Button
x:Name="bluebutton"
Width="100"
Height="40"
Content="Click Me">
<Button.Background>
<SolidColorBrush Color="Blue" />
</Button.Background>
</Button>

WP8 Pivot inside Panorama

I want to place Pivot inside Panorama and disable horizontal flick gestures for Pivot.
If I set IsLocked="True" for Pivot, when I make horizontal flick,
Panorama item is not changing.
If i set IsHitTestVisible="False" for
Pivot, I cant tap anything inside Pivot.
How can make this:
Pivot can "sense" Tap and vertical flick gestures
Panorama can "sense" horisontal flick gestures
This is not recommended behavior for Windows phone platform. Putting a Pivot inside a Panorama doesn't make sense at all and goes against WP design guidelines. Cant you have the same functionality with Panorama control alone?
Use PanoramaItems as you use PivotItems, if you want vertical scrolling use a ScrollView instead. Doing like you mentioned might make your app not certifiable.
<Grid x:Name="LayoutRoot">
<phone:Panorama Title="my application">
<!--Panorama item one-->
<phone:PanoramaItem Header="item1">
<Grid>
<ScrollViewer Height="480">
<StackPanel>
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</StackPanel>
</ScrollViewer>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item2">
<Grid/>
</phone:PanoramaItem>
<phone:PanoramaItem Header="item3">
<Grid/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
With the above Panorama Page you can have horizontal scrolling among PanoramaItems and Vertical Scrolling for the content of the PanoramaItem

Windows Phone 8. Panorama control ergonomic ambiguity

I am developing Windows Phone 8 application.Everything is pretty good , but i found one thing i have not handled beforehand - and now than Panorama Control behavior confuses me.
Here`s simplified example of my application Hub Page (with Panorama Control):
Simplified page XAML is next :
<phone:Panorama>
<i:Interaction.Behaviors>
<b:PanoramaBehaviour/>
</i:Interaction.Behaviors>
<phone:PanoramaItem Header="Panorama1">
<ScrollViewer>
<StackPanel>
<Button Height="72" Content="Button1" Click="Button_Click"/>
<Button Height="72" Content="Button2" Click="Button_Click"/>
<Button Height="72" Content="Button3" Click="Button_Click"/>
<Button Height="72" Content="Button4" Click="Button_Click"/>
<Button Height="72" Content="Button5" Click="Button_Click"/>
<Button Height="72" Content="Button6" Click="Button_Click"/>
<Button Height="72" Content="Button7" Click="Button_Click"/>
<Button Height="72" Content="Button8" Click="Button_Click"/>
<Button Height="72" Content="Button9" Click="Button_Click"/>
</StackPanel>
</ScrollViewer>
</phone:PanoramaItem>
<phone:PanoramaItem Header="Panorama2">
<Grid Background="Red" Tap="GridTap"/>
</phone:PanoramaItem>
</phone:Panorama>
So the problem is next - often, when i try to swipe panorama from one item to another, i have one of buttons of first panorama item clicked. So i`m navigated to another application page.
Can somebody tell me, how do i prevent this panorama control behavior ?
-----------------EDIT:
EventToCommand solutions doesnt work for me.
Yes that one bugs me too and has been an issue since WP7. The solution is to use the Tap event in this case rather than the Click event as that doesn't give false activations in the same way. Tap is available on any UIElement, not just buttons.
DONE!)
As Paul Annetts told, tap event is raised in another way that Click event does.
So for Button on Panorama control solution is next :
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
<Button Content="Button1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<i:InvokeCommandAction IsEnabled="True" Command="{Binding TestCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>

How to add a shadow around a TextBlock in XAML

I noticed a Windows Store app called PressPlay Video:
http://apptivate.ms/apps/76/pressplay-video
It is able to display text with a shadow all around the text (for subtitles and overlay).
Since drop shadow effects aren't available in WinRT, I was wondering how to do it.
They simply stacking TextBlocks and adjusting their margins and colors to simulate shadow effect. Something like:
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock FontSize="50" Text="My Marvelous Shadow" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="6 6 0 0" Opacity="0.1" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="5 5 0 0" Opacity="0.1" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="4 4 0 0" Opacity="0.1" />
<TextBlock FontSize="50" Text="My Marvelous Shadow" Margin="3 3 0 0" Opacity="0.1" />
</Grid>
It's not all-around, but you should get the idea.
P.S. It's sometimes helpful to dive into Program Files\WindowsApps and look inside some apps.