TLDR: Can you tell me what is wrong with the simple "hello world" like WPF 3D app below?
Long version:
I am reading a Computer Graphics book that gives examples in WPF. In this particular example, they do not supply the full source code, but introduce the code part by part.
The only difference I have so far is that they use a <Page> as the root object, for which I use <Window>.
I am supposed to see a yellow triangle in the window, but I am seeing an empty Windows window.
I am using Visual Studio 2015 Community Edition.
Code of the MainWindow.xaml is below. After creating the WPF Windows project, I changed only this file.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<MeshGeometry3D x:Key="RSRCmeshPyramid"
Positions="0,75,0 -50,0,50 50,0,50"
TriangleIndices="0 1 2" />
<DiffuseMaterial x:Key="RSRCmaterialFront" Brush="Yellow"/>
<DiffuseMaterial x:Key="RSRCmaterialBack" Brush="Red"/>
</Window.Resources>
<Viewport3D >
<Viewport3D.Camera>
<PerspectiveCamera Position="57, 247, 41"
LookDirection="-0.2, 0, -0.9"
UpDirection="0,1,0"
NearPlaneDistance="0.02"
FarPlaneDistance="1000"
FieldOfView="45"/>
</Viewport3D.Camera>
<!-- scene -->
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<AmbientLight Color="White"/>
<DirectionalLight Color="Green" Direction="1,-1,-0.9"/>
<GeometryModel3D
Geometry="{StaticResource RSRCmeshPyramid}"
Material="{StaticResource RSRCmaterialFront}"/>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>
Bring your MeshGeometry3D close to the origin and make your camera point at it, like below:
XAML:
<Window x:Class="WpfApplication343.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication343"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<MeshGeometry3D x:Key="RSRCmeshPyramid"
Positions="0,3,0 -2,0,2 2,0,2"
TriangleIndices="0 1 2" />
<DiffuseMaterial x:Key="RSRCmaterialFront" Brush="Yellow"/>
<DiffuseMaterial x:Key="RSRCmaterialBack" Brush="Red"/>
</Window.Resources>
<Grid>
<Viewport3D >
<Viewport3D.Camera>
<PerspectiveCamera Position="10,10,10"
LookDirection="-1,-1,-1"
UpDirection="0,1,0"
NearPlaneDistance="0.02"
FarPlaneDistance="1000"
FieldOfView="45"/>
</Viewport3D.Camera>
<!-- scene -->
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<AmbientLight Color="White"/>
<DirectionalLight Color="Green" Direction="1,-1,-0.9"/>
<GeometryModel3D
Geometry="{StaticResource RSRCmeshPyramid}"
Material="{StaticResource RSRCmaterialFront}"/>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Grid>
Related
Context: I'm using Mahapps.Metro Flyouts with Material Design toolkits.
Problem: When a Flyout opens it is not positioned as specified. For example, if I set the Flyout to be at the Bottom of the Window it gets positioned at the vertical center.
I’ve set up the App.xaml to support both Mahapps and Material Design. I also do a mapping of the themes and accents for a consistent experience.
I took the configuration as shown in the MD WIKI. I got a Metro Window and my application uses various controls with Mahapps and Material Design styling – without any trouble. Only the flyouts don’t work correctly.
To isolate the problem I reduced my application to a minimum. Furthermore I took the example flyout from the Material Design Mahapps demo application.
While the demo application runs perfectly, it doesn’t work in the context of my application.
If I leave the Mahapps-MD compatibility stuff out of my App.xaml the flyout works correctly, but of course without the MD theming.
App.xaml:
<Application x:Class="Frontend.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Frontend"
StartupUri="MainWindow.xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d1p1:Ignorable="d"
xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:UiLogic="clr-namespace:EPM.Frontend.Logic;assembly=Frontend.Logic">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<UiLogic:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
</ResourceDictionary>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
<!-- Material Design -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
<!-- Material Design: MahApps Compatibility -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml" />
<!--<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />-->
<ResourceDictionary Source="/Resources/Icons.xaml" />
<ResourceDictionary Source="Themes/Colors.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- MahApps Brushes -->
<SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource Primary700}"/>
<SolidColorBrush x:Key="AccentColorBrush" Color="{DynamicResource Primary500}"/>
<SolidColorBrush x:Key="AccentColorBrush2" Color="{DynamicResource Primary400}"/>
<SolidColorBrush x:Key="AccentColorBrush3" Color="{DynamicResource Primary300}"/>
<SolidColorBrush x:Key="AccentColorBrush4" Color="{DynamicResource Primary200}"/>
<SolidColorBrush x:Key="WindowTitleColorBrush" Color="{DynamicResource Primary700}"/>
<SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{DynamicResource Primary500Foreground}"/>
<LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5">
<GradientStop Color="{DynamicResource Primary700}" Offset="0"/>
<GradientStop Color="{DynamicResource Primary300}" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="CheckmarkFill" Color="{DynamicResource Primary500}"/>
<SolidColorBrush x:Key="RightArrowFill" Color="{DynamicResource Primary500}"/>
<SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{DynamicResource Primary500Foreground}"/>
<SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{DynamicResource Primary500}" Opacity="0.4"/>
</ResourceDictionary>
</Application.Resources>
</Application>
Window (reduced to the relevant stuff):
<Controls:MetroWindow x:Class="Frontend.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:EPM.Frontend"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
DataContext="{Binding Main, Mode=OneWay, Source={StaticResource Locator}}"
Title="electronic platform manager" Width="732" Height="452"
Background="{DynamicResource MaterialDesignPaper}"
BorderThickness="1"
BorderBrush="{DynamicResource AccentColorBrush}"
EnableDWMDropShadow="True">
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl x:Name="flyoutsControl">
<Controls:Flyout x:Name="LeftFlyout" Position="Bottom" Header="Settings" materialDesign:FlyoutAssist.HeaderColorMode="Accent" IsOpen="True" Height="80">
<local:FlyoutContent />
</Controls:Flyout>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>
</Controls:MetroWindow>
Packages I'm using:
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="CommonServiceLocator" version="1.3" targetFramework="net46" />
<package id="EntityFramework" version="6.1.3" targetFramework="net46" />
<package id="MahApps.Metro" version="1.4.1" targetFramework="net46" />
<package id="MahApps.Metro.IconPacks" version="1.6.0" targetFramework="net46" />
<package id="MahApps.Metro.Resources" version="0.6.1.0" targetFramework="net46" />
<package id="MaterialDesignColors" version="1.1.3" targetFramework="net46" />
<package id="MaterialDesignThemes" version="2.2.1.750" targetFramework="net46" />
<package id="MaterialDesignThemes.MahApps" version="0.0.8" targetFramework="net46" />
<package id="MvvmLight" version="5.3.0.0" targetFramework="net46" />
<package id="MvvmLightLibs" version="5.3.0.0" targetFramework="net46" />
</packages>
Output:
After trying a few hours getting this to work I’ve still no clue what the problem could be. Any hint is highly appreciated.
Best regards,
Marcus
I've been playing around with some basic WPF Storyboard animation and it looks quite blurry, it's Ok up to a certain speed then really degrades into blurryness.
Is there anyway I can get it to look smoother? - increase the framerate somehow or maybe double buffer the animation?
I've tried setting the objects to CacheMode="BitmapCache" but this seems to have little effect.
Does anyone have any ideas please?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="1000" Height="600" >
<Window.Triggers>
<EventTrigger RoutedEvent="UserControl.Loaded" >
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation From="600" To="-600" Duration="00:00:02"
Storyboard.TargetName="MyObject"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid Name="MyObject">
<Grid.RenderTransform>
<TranslateTransform X="0" />
</Grid.RenderTransform>
<Ellipse Stroke="Black" Fill="Green" StrokeThickness="3" Width="100" Height="250" />
<Ellipse Stroke="Black" Fill="White" StrokeThickness="3" Width="80" Height="180" />
</Grid>
</Grid>
</Window>
You could try increasing the FrameRate:
MediaTimeline.DesiredFrameRateProperty.OverrideMetadata(typeof(System.Windows.Media.Animation.Timeline), new FrameworkPropertyMetadata(60));
The higher the number, the higher the framerate (the smoother the execution). Be cautious though, higher framerates impact performance!
I hope this helps.
I'm struggling to get a PropertyPath to work - I've got a Transformation in the Window Resources that I'm trying to affect via a StoryBoard - also in Window Resources ...
Heres the property path i'm using ...
(Viewport2DVisual3D.Transform).(Transform3DGroup)[0].(RotateTransform3D).(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)
EDIT: Thanks to Anurags suggestion I've got a bit further ...
(Viewport2DVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)
but now it errors with "Rotation property does not point to a DependencyProperty"
Can anyone please put me back on track?
Heres the code in full ...
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Window.Resources>
<Transform3DGroup x:Key="WorldTranslation">
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
<Storyboard x:Key="MyStoryboard">
<DoubleAnimation
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
From="0.0" To="360" Duration="0:0:1" />
</Storyboard>
<MeshGeometry3D
x:Key="squareMeshFrontLeft"
Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Window.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,10" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<Viewport2DVisual3D Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFrontLeft}" >
<Viewport2DVisual3D.Transform>
<StaticResource ResourceKey="WorldTranslation" />
</Viewport2DVisual3D.Transform>
<StackPanel Background="Blue" Width="80" Height="80">
<Button Height="30" Margin="20">
<Button.Content>Blah</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>
First of all, instead of DoubleAnimation, use 3D KeyFrame Animation.
and correct your StoryBoard.TargetProperty's syntax using (Transform3DGroup.Children) instead of
check this also:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/78170274-a585-4cd6-85ed-edfd655d34ab
The main problem is in LinearGradientBrush. It fills triangle in solid red. What's wrong? I have tried almost the same code with 2d shapes. It worked perfectly.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="215" Width="336">
<Grid Height="146" Width="232">
<Viewport3D Name="myViewPort" ClipToBounds="False">
<Viewport3D.Camera>
<PerspectiveCamera x:Name="myCamera"
Position="10,10,10"
UpDirection="0,1,0"
LookDirection="-10,-10,-10"
FieldOfView="10"/>
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="-1,0,0 0,1,0 1,0,0" TriangleIndices="0,2,1" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"></GradientStop>
<GradientStop Color="Red" Offset="0.6"></GradientStop>
</LinearGradientBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight></AmbientLight>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Grid>
You need to add TextureCoordinates to your Geometry:
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1,0,0 0,1,0 1,0,0"
TextureCoordinates="0,0 1,0 1,1"
TriangleIndices="0,2,1"
/>
</GeometryModel3D.Geometry>
Once you do this, the material will map to the texture coordinates appropriately, and you'll see your black->red gradients. Right now, the texture coordinates are all defaulting to a point that's in the "red" portion of the gradient.
I've got a KeyFrame Animation storyboard and a separate rotation transformation in my Window.Resources.
The rotation transformation works as I can alter the angle and see the content rotate. I know the storyboard is being called, because it took me a few goes to get the PropertyPath right after I clicked on the button.
However now it does nothing - no error, but no rotation either!
Can anyone help please?
Thanks,
Andy
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400">
<Window.Resources>
<Storyboard x:Key="myStoryboard">
<Rotation3DAnimationUsingKeyFrames
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)" >
<Rotation3DAnimationUsingKeyFrames.KeyFrames>
<LinearRotation3DKeyFrame KeyTime="0:0:1">
<LinearRotation3DKeyFrame.Value>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</LinearRotation3DKeyFrame.Value>
</LinearRotation3DKeyFrame>
</Rotation3DAnimationUsingKeyFrames.KeyFrames>
</Rotation3DAnimationUsingKeyFrames>
</Storyboard>
<RotateTransform3D x:Key="myRotateTransform3D" >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="30" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
<!-- Front, left square -->
<MeshGeometry3D
x:Key="squareMeshFront"
Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<!-- Bottom -->
<MeshGeometry3D
x:Key="squareMeshBottom"
Positions="-1,-1,1 1,-1,1 1,-1,-1 1,1,-1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Window.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,9" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<Viewport2DVisual3D Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFront}" Transform="{StaticResource myRotateTransform3D}" >
<StackPanel Background="Blue" Width="120" Height="80">
<Button Height="30" Margin="20">
<Button.Content>Click Me</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource myStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>
The problem is in Storyboard.Target="{Binding TemplatedParent}". Give a name to Viewport2DVisual3D control: <Viewport2DVisual3D x:Name="vp" .../>, and set Storyboard.TargetName="vp" instead of what you have...
Cheers