I trying to change the appearance of a Popup in a UWP App but I'm having trouble using any Transitions. Basically, the XAML parser throws an exception whatever Transition I use.
Please can someone help tell me what I'm doing wrong?
Here is some example XAML that blows up:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Popup x:Name="popup" IsOpen="True">
<Popup.Transitions>
<PopupThemeTransition FromHorizontalOffset="100"/>
</Popup.Transitions>
<Border Background="Red" Width="100" Height="100"/>
</Popup>
</Grid>
The type of UIElement.Transitions property value should be TransitionCollection. We cannot directly give a PopupThemeTransition to Popup.Transitions. You code snippet is lacking of the TransitionCollection element. Right using as follows:
<Popup x:Name="StandardPopup" >
<Popup.Transitions>
<TransitionCollection>
<PopupThemeTransition FromHorizontalOffset="100"/>
</TransitionCollection>
</Popup.Transitions>
<Border Background="Red" Width="100" Height="100"/>
</Popup>
Related
Hi I am currently building a flash card productivity app which has has a user control that i have made. On making the control i realized that it was too small for to be displayed well or rendered well on my phones display. So i then began to enlarge the user control by increasing the width and height of the control and also increasing the size of the text of all the controls contained in the user control .Only when i one try to run the control i get given this exception :
An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in SuperCards.exe but was not handled in user code
WinRT information: Failed to create a '%1' from the text '%0'. [Line: 12 Position: 48]
Additional information: The text associated with this error code could not be found.
Here is the xaml code for the user control :
<UserControl
x:Class="SuperCards.CardPackItemListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SuperCards"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="125"
d:DesignWidth="400" >
<Border CornerRadius="2" BorderThickness="1" BorderBrush="White">
<Grid Background="White" Height="Auto" Width=" Auto">
<TextBlock x:Name="cardPackItemNameDisplay" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Height="Auto" Text="(Sample) Periodic Table" Foreground="Gray" Margin="9,9,0,0" FontSize="30" />
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="9,30,9,9" Width="Auto" Height="9" Background="gray" >
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Stretch" Fill="Red" Width="46"/>
</Grid>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Top" Text="36" Foreground="Gray" Margin="0,9,9,0" FontSize="30"/>
</Grid>
</Border>
and here visual studios notified that the exception was not handled at the initializing component inside the constructor of the user control.
The following attribute on line 12 corresponds with the line in the error message; remove the leading space within the quotes:
Width=" Auto"
This may also cause problems if color names in WinRT are case sensitive; best to capitalize the G in Gray just in case:
Background="gray"
I have a WPF application which checks for new images in a certain parent directory, and if there are new images, it switches the currently displayed images (I have 6 images).
I would like to add a feature which will allow a user to click on one of the images, and upon that click, a 'new' window will appear, showing that image enlarged, and another click anywhere on the screen will quit this enlargement and put the focus back to the other (6) images.
Is that possible? I tried googling zoom image wpf but found only mouse-drag related solutions.
I also tried using viewport but that didn't to work so well either.
Update - XAML
<Grid Grid.Row="0">
<GroupBox x:Name="AccuracyGraphsGroupBox" Header="Accuracy" Foreground="Red">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPicBox" MouseUp="AccuracyPicBox_OnMouseUp"></Image>
<Image Grid.Column="1" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPerioPicBox" MouseUp="AccuracyPerioPicBox_OnMouseUp"></Image>
</Grid>
</GroupBox>
</Grid>
As the guys mentioned in the comments, your best bet is to use a ToolTip to popup your full size image. There is a slight problem with data binding the Image.Source value from the original Image in your ToolTip, because they are not part of the normal UI visual tree and exist in their own tree. However, we can overcome this by using the ToolTip.PlacementTarget property:
<Image Name="Image" Source="/WpfApplication1;component/Images/Tulips.jpg" Height="100"
Stretch="Uniform">
<Image.ToolTip>
<ToolTip DataContext="{Binding PlacementTarget,
RelativeSource={RelativeSource Self}}">
<Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
<Image Source="{Binding Source}" Stretch="None" />
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
Of course, you could just use the same Binding Path in both Image.Source properties, but I never like repeating code.
I want to use a usercontrol I found on the web in my WPF application. The thing is that I don't want to have to put it in a user control library and build it and then reference that. I just want to be able to import the files into my project and use it from there.
So what I have done is dragged the files into the solution explorer, and it added them okay. I then changed the namespaces to match my own and then attempted to add it to the main forms xaml(This is where my issue is.)
It says the type "local:Pie" is not found. Verify that you are not missing an assembly reference...and you know the rest.
Here is how I am calling it on my main for xaml:
<Grid>
<local:Pie Value="0" x:Name="pieChart" HorizontalAlignment="Center" Width="400" VerticalAlignment="Center" Margin="10"/>
<StackPanel HorizontalAlignment="Left" Margin="30,0,50,0" VerticalAlignment="Center">
<Slider Orientation="Vertical" Minimum="0" Maximum="1" TickFrequency="0.01" Height="272" ValueChanged="Slider_ValueChanged_1" Value="0" Name="slider"/>
</StackPanel>
</Grid>
Here is the controls XAML with my application namespace added:
<UserControl x:Class="MyApplicationNAmespace.Pie"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Loaded="UserControl_Loaded_1" SizeChanged="UserControl_SizeChanged_1">
<Grid>
<Ellipse Name="bgCircle"/>
<Path Name="path" StrokeThickness="1.5" Margin="0"/>
<Ellipse Name="hole" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<ScaleTransform ScaleX="0.45" ScaleY="0.45"/>
</Ellipse.RenderTransform>
</Ellipse>
<Label Content="Value" HorizontalAlignment="Center" VerticalAlignment="Center"
FontFamily="Segoe UI Light" FontSize="38" Name="lblValue"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</UserControl>
For the codebehind of the control all I have changed was the namespace to match my projects namespace.
Can anyone tell me what I am doing wrong? Thank you.
I'm trying to position a rectangle in the center of a grid with a restricted height, like so:
<Grid ClipToBounds="False">
<Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">
<Rectangle Height="40" Width="20" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="False"/>
</Grid>
</Grid>
I've expected it to look like that:
But instead it looks like that:
I know the my child rectangle is bigger and it is understandable that it clips, however, my ClipToBounds have no effect of anything. After reading around, I found that indeed Grid does not respect "ClipToBounds".
I tried to use Canvas, as suggested in the aforementioned article by Dr.Wpf but I can't seem to get it right.
Is there anything I can do to make it look like the 1st picture, without resorting to C# code?
Thanks!
It's a little hard to tell exactly what your requirements are here. You said you tried it witha Canvas, but you can't seem to get it right. What didn't work?
I used this code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="175" Height="170" Background="LightGray">
<Grid>
<Canvas Background="LightBlue" Height="10"
Margin="0,27,0,79" VerticalAlignment="Top">
<Rectangle Height="40" Width="20" Fill="Black"
Canvas.Left="66" Canvas.Top="-15" />
</Canvas>
</Grid>
</Window>
and was able to essentially fake what your screenshot looked like. But (as you can tell by the Canvas.Left and Canvas.Top parts of my code) it is sort of hackish. You could get rid of the Canvas.Left by binding to the ActualWidth of the Canvas and using an IValueConverter that converts it to the correct value.
Edit:
After a little further exploration, I came up with a slightly less hackish way of doing it. Though the nesting kind of makes me cringe, the only thing hardcoded is the top margin to get it centered vertically. Again, that can be done with an IValueConverter, but you don't want that. I'm not sure I can get any better than this, unfortunately.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication10.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">
<Canvas>
<Grid Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}">
<Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 -40 0 0">
<Rectangle Height="40" Width="20" Fill="Black" ClipToBounds="False"/>
</Canvas>
</Grid>
</Canvas>
</Grid>
</Grid>
</Window>
I've searched long and hard to find an example of this on the net. I've seen the alternative methods for this but I want to specifically use a thumb. In trying to hash out a solution I've been unable to get the functionality right/working as I'm fairly new to WPF. I'd be grateful if someone could give an example of how you may implement the above.
Cheers
A Popup doesn't give you an obvious way to move it; you can only place it relative to its placement target. However it does give you and additional offset relative to the placement target and that's enough to move it anywhere.
Here's a working markup-only solution that demonstrates a draggable Popup using a Thumb using Markup Programming. There is a text box that has a popup that pops up when the text box receives the keyboard focus. The popup has some text and a thumb.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:p="http://markupprogramming.codeplex.com/markup/programming"
Height="300" Width="300">
<Grid>
<StackPanel>
<TextBox x:Name="textBox1" Width="200" Height="20"/>
</StackPanel>
<Popup Name="popup" PlacementTarget="{Binding ElementName=textBox1}"
IsOpen="{Binding IsKeyboardFocused, ElementName=textBox1, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<TextBlock Background="White" Text="Sample Popup content."/>
<Thumb Name="thumb" Width="20" Height="20"/>
</StackPanel>
<p:Attached.Operations>
<p:ScriptHandler Path="#FindElement('thumb').DragDelta">
#AssociatedObject.HorizontalOffset += #EventArgs.HorizontalChange;
#AssociatedObject.VerticalOffset += #EventArgs.VerticalChange;
</p:ScriptHandler>
</p:Attached.Operations>
</Popup>
</Grid>
</Window>