I want to have something like shown in this screenshot here:
The Edit part should be in the bottom of the circle and should be tappable. How can I achieve this in UWP xaml?
You can just "draw over" a Button to the Ellipse in a layout control eg. in a Grid. Something like this:
<Grid Height="100" Width="100" Background="Aqua">
<Ellipse Fill="Red"/>
<Button Background="Aqua" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Content="Edit" Tapped="Button_Tapped"/>
</Grid>
Related
I'm using Panorama Control, and have image on the top. My XAML code as follow:
<Grid x:Name="LayoutRoot">
<Image Grid.Row="0" Source="/Images/khuyenmai.png" Height="85" Width="85" HorizontalAlignment="Right" x:Name="imgKhuyenMai" Tap="imgKhuyenMai_Tap" VerticalAlignment="Top" Margin="305,5,41,0" RenderTransformOrigin="2.205,-6.523"></Image>
<phone:Panorama Grid.RowSpan="2" Margin="0,0,0,10">
<!--Panorama item one-->
<phone:PanoramaItem Header="item1">
<Grid/>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item2">
<Grid/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
My problem is : "Tap" event is not working ?
In Grid, when Canvas.ZIndex of items is equal, the latter item will cover the ahead item. For example, in your code, Panorama will cover Image item, So you can't Tap it. There are 2 solutions, you can choose one:
set Canvas.ZIndex = 1 on Image
OR
change sort of your code like this, put Image latter than Panorama:
<Grid x:Name="LayoutRoot">
<phone:Panorama/>
<Image/>
</Grid>
I have an issue with popup placement and especially the target origin.
I want to apply a Metro UI style to my combobox so there's no border between the textbox and the itemslist.
It works well when the popup is placed at the bottom
Placement="Bottom"
but when it encounters the bottom edge of the screen the target origin becomes the top of the placement target.
I'd like to know when the target origin changes to the top left corner, that way i could change the borderthickness of the control. Unfortunately the placement property is not reset to the new target origin so I'm a bit lost here.
Here's the code of the usercontrol.
The placement is set to custom here, it's the only workaround i've found to have something that suits me. But if I want metro like comboboxes I need to know where the popup really shows up...
<Grid>
<formElement:LabelBoxPC x:Name="NameFilter"
LabelName="{Binding FilterLabel,
ElementName=UCInlineFilterPreSelected}"
TextBoxCommand="{Binding GoToEntityManagementCommand}"
TextBoxValue="{Binding SearchValue,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}">
<formElement:LabelBoxPC.InputBindings>
<KeyBinding Key="F4" Command="{Binding GoToEntityManagementCommand}" />
</formElement:LabelBoxPC.InputBindings>
</formElement:LabelBoxPC>
<Popup x:Name="ResultsGrid"
Placement="Custom"
IsOpen="{Binding ElementName=NameFilter, Path=TextBoxFocus, Mode=OneWay}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="None">
<StackPanel>
<Border Padding="5px" Background="#FFF" BorderBrush="#000000" BorderThickness="2,2,2,0">
<Button HorizontalAlignment="Right" Style="{StaticResource SmallIconButton}" Background="{StaticResource DarkCloseIcon}"></Button>
</Border>
<ListBox x:Name="Results"
Width="220"
Style="{StaticResource InlineFilterListBox}"
Height="150"
ItemsSource="{Binding Results}"
SelectedItem="{Binding SelectedObject, ElementName=UCInlineFilterPreSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</Popup>
</Grid>
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.
I've created a simple user control for my xaml project, but as you can see from my image i cant seem to be able to do certain things.
Ignore the red line, its the size of the control for illustrate its size.
It's placement should be middle of the screen:
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
And as you see its background color should be "Azure" with a blueish border of 3.
Why is this?
In the background I have a Canvas:
<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
<Canvas Name="GameCanvas">
<Canvas.RenderTransform>
<CompositeTransform x:Name="CanvasRenderTransform" />
</Canvas.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" Tap="GestureListener_Tap" PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta"/>
</toolkit:GestureService.GestureListener>
</Canvas>
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
</Grid>
As for my third problem, having the events in the canvas causes the Move slider to be interrupted, making me only able to push it a little each time :-/
In case TileMenu is a UserControl you would have to set these properties on the top level container in the UserControl's XAML as this defines the entire visual structure of the control.
You could bind to the appropriate values in the UserControl, however:
<UserControl x:Class="YourNamespace.TileMenu" ...
x:Name="tileMenu">
<Border BorderBrush="{Binding BorderBrush, ElementName=tileMenu}"
BorderThickness="{Binding BorderThickness, ElementName=tileMenu}">
<Grid>
...
</Grid>
</Border>
</UserControl>
I've got a long list selector.
All I want to do is to align two elements inside the ItemTemplate:
1. a button to the right with a given, fixed width
2. a text panel to the left that fills the remaining space of the display.
But unfortunately the text panel is not strechted and the button is aligned to right end of text of the text panel. :(
This is my code:
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel Orientation="Horizontal" Name="DummerContainer" HorizontalAlignment="Stretch">
<TextBlock FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Stretch"/>
<Button HorizontalAlignment="Right" Width="120"/>
</StackPanel>
</DataTemplate>
and
<phone:LongListSelector
HorizontalAlignment="Stretch"
x:Name="AddrBook"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
So, this is my question: How can I align the two elements correctly?
That's a result of using a horizontal StackPanel...
Use a Grid rather than a StackPanel in your DataTemplate. Then you can define the ColumnDefinitions to assign the space as you require, i.e.:
define column 0 as Width="*" and put your TextBlock in it
define column 1 as Width="Auto" put your Button in it.
Afaik, Stackpanel is faster than Grid. So, i decided to find out the root of the problem. And i found it here: http://y2bd.me/blog/2013/08/16/fixing-alignment-issues-with-datatemplateselector/
Works fine for me.