HorizontalAlignment not working for Image inside Button (UWP) - xaml

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>

Related

Control other buttons via the All Agree button

I have 5 buttons.
One button should control the other buttons.
One button should make all other buttons checked.
I wrote the code for the full consent button xaml like this
<ToggleButton VerticalAlignment="Center" Width="230" Height="95"
Command="{Binding Path=AllButtonCommand}"
CommandParameter="ButtonAll" Style="{StaticResource ButtonStyle.AllButtonButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="full agreement" /></StackPanel>
</ToggleButton>
<ToggleButton VerticalAlignment="Center" Width="66" Height="66" Command="{Binding Path=AgreeCommand}" CommandParameter="Agree" Style="{StaticResource ButtonStyle.AgreeButtonStyle}" >
<StackPanel Orientation="Horizontal">
<Image Grid.Row="0" Grid.Column="0" Width="30" Height="25"
Source="/Common/Images/check.png"/>
</StackPanel>
</ToggleButton>
I want to change it to one with a background color like the first image when I click the agree all button like the image, and when I click it again I want to change it to one with no background color
I wish there was someone who could help

ContentControl and Button Content Binding

I am new to XAML.
I have a Mainview with a Button.
This button must display a UserControl by binding the content, and in the same time, the button must disappear.
My first try :
<ContentControl Content="{Binding CurrentViewModel}"/>
<ContentControl>
<Button Command="{Binding TestCommand}">
<Grid >
<Image Source="....." />
<TextBlock Text="Text on the button"/>
</Grid>
</Button>
</ContentControl>
In this example, when I click on the button, my usercontrol is displayed but the button remains in the MainWindow which is normal.
Of course I can create a usercontrol with just the button and keep only <ContentControl Content="{Binding CurrentViewModel}"/> it will do the job, but is it possible to do it in XAML?
Something like "Display the button only if MainWindowViewModel is binded?"
Thanks.

How to add a button into a textblock in UWP?

I want to add a Button in a Textblock. I mean, Buttons(Objects) among Text.
The code below does not work.
<TextBlock>
<Button />
</TextBlock>
TextBlock seems to support only text, so which control should I use?
You can't display anything but text in a TextBlock. If you want to display a Button in some running text you could for example use a StackPanel:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some text with a " /><Button Content="Button" VerticalAlignment="Center" /><TextBlock Text="in it." />
</StackPanel>

Why a button with an image doesn't respect width and height settings

I'm creating a button that will display an image instead of text, the problem is, the width and height is just ignored.
Why?
<Button Grid.Column="1" Grid.Row="1" Width="60" Height="60" Margin="0, -30, 0, 0" BorderThickness="0" >
<Image Source="Assets/ic_play.png" Width="60" Height="60" Margin="0,-29, 0,0" />
</Button>
Button has MinWidth/MinHeight property by default (see question here. The Style of the default button looks like in this answer.
So you will have to override those minimum values for single button (or define Style and use it among other buttons):
<Button Grid.Column="1" Grid.Row="1" MinHeight="60" MinWidth="60" Width="60" Height="60" Margin="0, -30, 0, 0" BorderThickness="0" >
<Image Source="Assets/ic_play.png" Width="60" Height="60" Margin="0,-29, 0,0" />
</Button>

How to Center a Popup Control on a Page

I have the following Popup that I am using which is by default in the upper left hand corner of the screen. I would like to be able to center this within my view so that I can stretch it to the width and height of the screen as well and change the opacity. I would like the user to be able to see what is behind the popup when it is displayed on the screen, but have the popup cover everything as well. What I have so far is as follows
<Grid x:Name="filterGrid">
<Popup x:Name="trialPopup" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.5">
<Border Margin="3" BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Background="#FF1BA1E2">
<TextBlock x:Name="modeTextBlock" HorizontalAlignment="Center"/>
<TextBlock Text="Do you wish to purchase the application?" TextWrapping="Wrap" HorizontalAlignment="Center"/>
<Grid Margin="0,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Button x:Name="purchaseButton" Grid.Column="0" Content="purchase" Click="popupButton_Click"/>
<Button x:Name="cancelButton" Grid.Column="1" Content="cancel" Click="popupButton_Click"/>
</Grid>
</StackPanel>
</Border>
</Popup>
</Grid>
Whenever I try to set Width="Center" and Height="Center" within the Popup element like the following
<Popup x:Name="trialPopup" HorizontalAlignment="Center" VerticalAlignment="Center">
The top left corner is what is centered, and so the popup is not centered in the middle of the control itself. Is there a way to calculate the proper dimensions based on the popup width and height as well as the page width and height and apply this accordingly? Or is there a way to do this correctly within XAML? Also, the Opacity value is not being set?
Center of Page:
<Popup PlacementTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}" Placement="Center" />
Center of Window:
<Popup PlacementTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" Placement="Center" />
Try using Offset properties of Popup:
trialPopup.VerticalOffset = - ((FrameworkElement)trialPopup.Child).ActualHeight / 2;
trialPopup.HorizontalOffset = -((FrameworkElement)trialPopup.Child).ActualWidth / 2;
The Opacity will work when set for the Popup.Child, but I don't know why it won't work on Popup.