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>
Related
I want a grid to stretch across the screen while also having a shadow effect applied, for some reason I can't the grid to stretch when placed inside of a DropShadowPanel.
Here is an example of the desired result, but without a shadow effect:
<Grid Background="LightBlue">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top" Margin="40"/>
</Grid>
Result:
Here is my xaml with a DropShadowPanel:
<Grid Background="LightBlue">
<controls:DropShadowPanel HorizontalAlignment="Stretch" Margin="40">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top"/>
</controls:DropShadowPanel>
</Grid>
And this hides the second grid entirely.
Why does the grid act differently inside a DropShadowPanel?
And this hides the second grid entirely.
The problem is you have not set HorizontalContentAlignment property of DropShadowPanel. I have modified your code like the following. And it works.
<controls:DropShadowPanel Margin="40"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
>
<Grid Background="Red" Height="200" HorizontalAlignment="Stretch"/>
</controls:DropShadowPanel>
In my application, I am having a ListView. ListView lists a set of images.
So when the application is running, and when that page is loaded, a list of images are shown.
<ListView ItemsSource="{Binding imageLists}" Background="Red" Tapped="ListView_Tapped">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
<StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As you can see from the code, I have one image & stackpanel inside the listview. And the stackpanel's visibility has been set to collapsed for convenience.
The StackPanel imageTitle resides inside the ListView. Stackpanel contains a TextBlock housing the images name. For now it's dumy text.
On Tapping any image in the list, I am trying to make the stackPanel visible.
The Code Behind:
private void ListView_Tapped(object sender, TappedRoutedEventArgs e)
{
imageTitle.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
Since the stackpanel is inside the listview & I am trying to make it visible on the tap event of the listview, I am not able to acheive the needed result. I know my code is wrong.
If I specify the stackpanel outside the listview, I can make it visible using the code I gave inside the ListView_Tapped function. But even in that case, I need to show the stackpanel (name of the image I clicked) inside the listview item (image I clicked).
Any help??
Can this be achieved using only XAML?
Here's a pure xaml way.
Rather than changing the Visibility of the imageTitle (not a great UX), let's change its Opacity to make its appearing more interesting.
First we need to create a storyboard inside this data template. This storyboard will fade in the imageTitle in 400ms.
And then we drag a ControlStoryboard behavior from Expression Blend's Asset panel onto the top level Grid. Basically we want the storyboard to fire off when this Grid is tapped.
Please see below code for reference.
<DataTemplate x:Key="GroupTemplate">
<Grid Background="Green">
<Grid.Resources>
<Storyboard x:Name="ShowImageTitleStoryboard">
<DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageTitle"/>
</Storyboard>
</Grid.Resources>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Media:ControlStoryboardAction Storyboard="{StaticResource ShowImageTitleStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Image Source="{Binding Image}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
<StackPanel x:Name="imageTitle" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
Apart from JustinXL's answer it can also be done by using ChangePropertyAction. Also pure XAML:
<DataTemplate>
<Grid Background="Green">
<Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Tapped">
<ic:ChangePropertyAction TargetObject="{Binding ElementName=imageTitle}" PropertyName="Visibility" Value="Visible"/>
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Image>
<StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
It's just another way to change a property - JustinXL's answer will provide nice animation with opacity, which will look much better.
I dunno why you specifically want to handle the scenario using XAML. For the Microsoft's recommended MVVM model you should bind a property to your element field and then you can write a converter for the same to return back "Visible" or "Collapse".
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 a simple Rectangle in XAML
<Rectangle x:Name="rect" IsTapEnabled="True" Height="100" Width="100" Fill="#FF72BB5C" Stroke="#FFFB0000" Tapped="rect_Tapped"/>
It draws fine but when I try and click on it nothing happens.
I have tried making the stroke bigger and clicking that and nothing.
I have tried lots of the other events associated with the Rectangle and nothing fires.
Would there be a problem calling the Tapped event when I'm using a mouse and not a touch screen?
Just faced the same issue. Solved with IsHitTestVisible property for Rectangle and every view above it. True for rect and False for others. Though True is default, could be omitted.
I just found strange and funny solution for this.
If your layout looks like this:
<Grid>
<Canvas>
<Rectangle x:Name="rect" IsTapEnabled="True" Canvas.Top="100" Canvas.Left="100" Height="100" Width="100" Fill="#FF72BB5C" Stroke="#FFFB0000" Tapped="rect_Tapped"/>
</Canvas>
<TextBlock Name="Test" Text="Hi" />
</Grid>
Then change it to this:
<Grid>
<Canvas>
<Rectangle x:Name="rect" IsTapEnabled="True" Canvas.Top="100" Canvas.Left="100" Height="100" Width="100" Fill="#FF72BB5C" Stroke="#FFFB0000" Tapped="rect_Tapped"/>
</Canvas>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Name="Test" Text="Hi" />
</Grid>
I just added VerticalAlignment="Center" HorizontalAlignment="Center" to TextBlock and now it works. Don't know why, but works. I'm going to go deeper into this issue.
I am working on a Metro App using C++ and XAML. I want to create a polygon shape and add text inside it.
At first I thought of defining my own Controltemplate and apply it to Textblock but unfortunately it does not understand TargetType = "TextBlock".
Secondly, I thought of inheriting the Polygon class and see if I can do anything there but that class is sealed.
Any ideas on how to achieve this?
In WPF XAML you could do something simple like this:
<Grid Width="60" Height="100">
<Ellipse Fill="Yellow"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello"/>
</Grid>
To get text in the centre of a yellow ellipse.
I'm guessing something that simple will work on WinRT.
You can use something like this with ContentControl or so many other controls:
<ContentControl Width="200" Height="100" Content="Something">
<ContentControl.Template>
<ControlTemplate>
<Grid>
<Ellipse Fill="Red"/>
<TextBlock Text="{Binding Content,RelativeSource={RelativeSource FindAncestor,AncestorType=ContentControl}}"
TextWrapping="Wrap"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>