Below is the full XAML for the WPF application, no codebehind. On computers that have Expression Blend 4 installed, the following application works. However, on machines that do not have Blend, the application crashes. This is extremely simplistic, but it appears that the [i:Interaction.Behaviors] portion is what is causing the issue, which is a behavior from Blend that creates a smooth animation.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="WpfApplication12.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<WrapPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children"/>
</i:Interaction.Behaviors>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
</WrapPanel>
</Grid>
You should ship System.Windows.Interactivity.dll with your application. Go to properties of that DLL in the references of you project and set Copy Local property to True. After that this assembly will be copied to the output folder of the project.
You need to include System.Windows.Interactivity.dll which is located at (Blend 3 pathing) ...Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\WPF
That file is redistributable as defined by (Blend 3 pathing) ...Program Files\Microsoft SDKs\Expression\Blend 3\Redist.en.txt
Related
I have the following XAML :
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel Margin="5">
<Path Stroke="Black" StrokeThickness="1" Fill="White" DockPanel.Dock="Left" VerticalAlignment="Center">
<Path.Data>
<GeometryGroup>
<LineGeometry StartPoint="10,0" EndPoint="0,10" />
<LineGeometry StartPoint="0,10" EndPoint="10,20" />
</GeometryGroup>
</Path.Data>
</Path>
<Rectangle Stroke="Black" RadiusX="10" RadiusY="10"/>
</DockPanel>
</Page>
It creates like a speech bubble. However I would like the part where the two join to be white or not to have any stroke.
Not very clever, but perhaps sufficient:
<DockPanel Margin="5">
<Path Stroke="Black" StrokeThickness="1"
Fill="White" DockPanel.Dock="Left" VerticalAlignment="Center"
Panel.ZIndex="1" Margin="0,0,-1,0" Data="M10,0 L0,10 10,20"/>
<Rectangle Stroke="Black" RadiusX="10" RadiusY="10"/>
</DockPanel>
A better solution might be to create a CombinedGeometry from the Path and the Rectangle.
If you have access to Blend you can use the Callout control, which does exactly what you want.
It resides in this assembly:
C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries\Microsoft.Expression.Drawing.dll
and is used like that:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ed:Callout AnchorPoint="-0.061,0.716" CalloutStyle="RoundedRectangle" Content="Callout" Fill="#FFF4F4F5" FontSize="14.667" HorizontalAlignment="Left" Height="109" Margin="61,78,0,0" Stroke="Black" VerticalAlignment="Top" Width="375"/>
</Grid>
</Window>
Edit: if you have Blend (for VS 2012) you can easily draw a path yourself that looks like a callout.
Example:
<Path Data="M110.029,0.5 L305.895,0.5 C314.17927,0.50000358 320.895,7.2157323 320.895,15.500005 L320.895,144.202 C320.895,152.48627 314.17927,159.202 305.895,159.202 L110.029,159.202 C101.74473,159.202 95.028999,152.48627 95.029,144.202 L95.029,119.139 0.5,94.029644 94.530329,44.776012 95.029,69.723011 95.029,15.500005 C95.028999,7.2157323 101.74473,0.50000358 110.029,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="159.702" Margin="122.366,45.642,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="321.395"/>
I'm using StackPanel in WPF just for easy layouting horizontally aligned boxes and lines, but it seems the performance of application is getting slower when using StackPanel.
All the Microsoft tutorials seems to talk only about freezing some SolidColorBrush etc. objects, but can StackPanel be freezed after first layout so the CPU doesn't have to layout it all the time, just once?
Or am I just forced to use the very fast Canvas object and layout all the objects inside it one by one?
Example 1: Very easy to layout in designer, but lacks performance:
<StackPanel Height="35" Canvas.Left="49" Canvas.Top="874" Width="395" Orientation="Horizontal">
<TextBox Text="test" Width="65"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="55"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="75"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="35"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="95"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="65"/>
<Rectangle Stroke="Black" Width="1" />
</StackPanel>
Example 2: Good performance, making layout in designer is a pain:
<Canvas Height="35" Canvas.Left="49" Canvas.Top="914" Width="395">
<TextBox Text="test" Width="65" Height="35"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="65"/>
<TextBox Text="test" Width="55" Canvas.Left="66" Height="35"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="195"/>
<TextBox Text="test" Width="75" Height="35" Canvas.Left="122"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="121"/>
<TextBox Text="test" Width="35" Height="35" Canvas.Left="198"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="197"/>
<TextBox Text="test" Width="95" Height="35" Canvas.Left="234"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="329"/>
<TextBox Text="test" Width="65" Height="35" Canvas.Left="330"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="233"/>
</Canvas>
No, StackPanel is not Freezable, however you mentioned that your GPU is having trouble rendering Animations at 60fps, Try dropping the Animation fps
In you main Windows constructor you can override the defualt framerate for Animations
I usally use 30fps as it is still smooth and users with low-end GFX cards will be able to run your application a lot smotther.
Example:
public MainWindow()
{
InitializeComponent();
Timeline.DesiredFrameRateProperty.OverrideMetadata(typeof(Timeline)
, new FrameworkPropertyMetadata { DefaultValue = 30 }); // 30 = 30fps
}
Give it a try and see if it helps
I have a UniformGrid object in my WPF project that has 2 rows and 3 cols and its width and height are set to auto (with both alignments set to Stretch).
This grid will hold 6 squares that I want to fill as much of their cell as possible and be centered horizontally and vertically.
What do I need to be added to allow for the squares to increase/decrease their length/width based on the dynamic size of the parent? I.E., when the window is resized.
Here is my xaml so far:
<UniformGrid Rows="2" Columns="3">
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
</UniformGrid>
Edit:
And the Rectangle objects need to remain square.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<UniformGrid Rows="2" Columns="3">
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
</UniformGrid>
</Grid>
</Page>
You could do this:
<UniformGrid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width"
Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" />
</Style>
</UniformGrid.Resources>
Or you could bind the Height to the ActualWidth.
Unfortunately this will not keep them stretched to the maximum.
If you remove the height and width properties it will do just that.
I have a control containing a PathListBox from Blend SDK (see XAML below). The items inside are of identical width and various height. Currently, the midpoint of the items follow the arc's path (see the picture) i.e. they are clearly vertically arranged 'center'. However, I would like the items 'top' vertically aligned, so their top follows the arc's path. How can I do that?
<Grid x:Name="LayoutRoot">
<ec:PathListBox Margin="160,290,-30,-250">
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath SourceElement="{Binding ElementName=arc}"
Padding="-25" FillBehavior="NoOverlap"
Distribution="Even" Span="0.5"/>
</ec:PathListBox.LayoutPaths>
<Rectangle Fill="#FFF4F4F5" Height="103" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="120" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="140" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
</ec:PathListBox>
<ed:Arc x:Name="arc"
ArcThickness="10" ArcThicknessUnit="Pixel" Margin="160,290,-30,-250"
Stretch="None" Stroke="Transparent" StartAngle="-7"
RenderTransformOrigin="0.5,0.5" StrokeThickness="3"
Opacity="0.155" Fill="LightGray">
<ed:Arc.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="-17" AngleX="-16"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</ed:Arc.RenderTransform>
</ed:Arc>
</Grid>
Just change margins of your rects:
...
<Rectangle Fill="Green" Height="103" Width="100" Margin="0,130,0,0"/>
<Rectangle Fill="Green" Height="120" Width="100" Margin="0,120,0,0"/>
<Rectangle Fill="Green" Height="140" Width="100" Margin="0,140,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
<Rectangle Fill="Green" Height="100" Width="100" Margin="0,100,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
...
I'm after trying it myself on Blend4 and it works.
I use the stack panel. It looks like every elements inside is stacking tightly. How to leave some margin between them.
Easiest way is to give each item it's own Margin
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" StrokeThickness="5" Margin="5,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" StrokeThickness="5" Width="100" Height="35" Margin="5,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" Margin="5,0,0,0" StrokeThickness="5"/>
</StackPanel>