We Keep Coding

DropShadowEffect with Semi Transparent Grid

I am trying to create a grid (with 30% opacity) and drop shadow from it. I have done a mock up in photoshop and this is what I want to achieve:
This is how I tried to implement it in xaml:
<Grid Background="#808080">
<Grid Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid Background="White"
Opacity="0.3">
<Grid.Effect>
<DropShadowEffect />
</Grid.Effect>
</Grid>
</Grid>
</Grid>
Unfortunately, this is how it turned out:
As you can see from the image above, the shadow effect can seen underneath the 30% grid. How do I remove the shadow effect within the grid and only make the shadow appear outside the grid (on the bottom right)?

Easy solution, drop the opacity. But I guess that would not be acceptable, so another solution which is more of a workaround.
Add a Border inside your inner grid and drop shadow on that border, also make the border thickness disappear on 2 sides on which you do not want the shadow. Something like this:
<Grid Background="White" Opacity="0.3">
<Border BorderBrush="White" BorderThickness="0,0,1,1">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
</Border>
</Grid>

wpf progressbar.RenderTransform outside of window in designer

when I apply the 180 degree transform to the progress bar it goes outside of the window. here is what it looks like in the designer.
http://i.imgur.com/mZfJHXL.jpg
how can I get it to move inside the window.
here is my code:
<Window x:Class="game.Player2Screen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Player2Screen" Height="298" Width="310">
<ProgressBar Name="ProgressBarTimer" Orientation="Vertical" Foreground="Blue" Background="Black" MouseLeftButtonDown="ProgressBarTimer_MouseLeftButtonDown"
Value="0" HorizontalAlignment="Center" Maximum="100" VerticalAlignment="Top" Height="250" Width="265" >
<ProgressBar.RenderTransform>
<RotateTransform Angle="180"/>
</ProgressBar.RenderTransform>
</ProgressBar>
</Window>

You need to specify the render transform origin.
See this MSDN article

Perhaps you want to use a LayoutTransform instead of RenderTransform.
The way WPF handles drawing components is:
LayoutTransform
Measure
Arrange
RenderTransform
Render
It sounds like you want to do your transformation before measuring and arranging the component, not after.

Zooming WPF canvas relative to the center rather than top left

I am writing a label-making program. In this program, I have a canvas with a white rectangle positioned in the center, with multiple objects that the user can resize, drag, etc on top of it. I also have an option for the user to zoom the canvas, which I accomplish using ScaleTransform via LayoutTransform. I want to have it so that, when the user zooms in, the canvas zooms in on the center, rather than relative to the top right.
Here's a demonstration:
Currently, the canvas zooms like this:
I need it to zoom like this:
How can I accomplish this task, without re-positioning the elements in the canvas when it is zoomed?
Note: I'm using LayoutTransform, since I must embed this in a ScrollViewer. RenderTransform accomplishes this, but won't let the user scroll when canvas elements exceed the visible canvas bounds.

You should be able to accomplish the same thing as RenderTransformOrigin, by using a transform that combines two translations around the scaling. E.g. using TransformGroup, or combining matrices for a MatrixTransform.
Specifically: translate the center point (X,Y) to (0,0) by using translation offsets of -X and -Y, perform the scale transform, and then translate (0,0) back to the original point (X, Y) using translation offsets of X and Y.
It's hard for me to know for sure without having a specific code example, but I have a vague sense that it ought to be possible to use RenderTransform, perhaps applied differently than you'd prefer (e.g. adding a new container to the hierarchy and applying it to that). But assuming RenderTransform simply won't work, the above should.

<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" Height="600" Width="600">
<Grid>
<ScrollViewer>
<Border>
<Border.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="2.0" ScaleY="2.0"/>
</TransformGroup>
</Border.LayoutTransform>
<Canvas Background="Red" Width="500" Height="500" VerticalAlignment="Center" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="-100"/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Canvas.Left="200" Canvas.Top="200" Width="100" Height="100" Fill="Yellow"/>
</Canvas>
</Border>
</ScrollViewer>
</Grid>
</Window>

Resize WPF application

Have tried searching google but I'm struggling to find an answer to this.
I have a basic WPF application with a few controls on. When I maximise the application the controls on the screen stay the same size and I get a lot of wasted space.
Is there a way to get the controls to grow and shrink dynamically with the size of the main window?
Kind Regards
Ash

Don't set a fixed Height and Width properties for your controls.
Instead set, horizontal and vertical alignment to stretch. And make sure your controls are contained inside an appropriate layout panel.
For example-
Fixed size grid:
<Grid Background="Red" Width="50" Height="50"/>
Dynamically expending grid:
<Grid Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

what you need is not resize, it's called scaling (or zooming) ;-)
Read this article; the task is very trivial with WPF.
(used to be much more complicated in Windows Forms...).
UI Scaling (UI Zooming) with WPF
basically all you need to add to the XAML is this:
<ScaleTransform
CenterX="0" CenterY="0"
ScaleX="{Binding ElementName=uiScaleSlider,Path=Value}"
ScaleY="{Binding ElementName=uiScaleSlider,Path=Value}"
/>
after that you can use mouse wheel or a slider or any other way (like in your case detect form maximized), to modify the Value of the ScaleTransform.

Where there's a will, there's a way. You will have to do some work yourself however, WPF can't automagically decide for you exactly how you want the resizing to be done.
Some relevant sources:
Layout containers
Data Binding

You can use content decorator that can stretch and scale a single child to fill the available space - Viewbox .
http://www.wpftutorials.com/2011/04/wpf-viewbox.html

this is no problem. The behavior of your controls depends on the container you use and the Horizontal and Vertical Alignment. For Example, if you use a Grid, a TextBox and a Button with Horizontal and Vertical Alignment: Stretch and width and height auto, the Textfield and Button will grow and shrink dynamically.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<TextBox Margin="8,8,8,104.96" TextWrapping="Wrap" Text="TextBox" Height="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" Margin="8,0,8,8" VerticalAlignment="Bottom" Height="92.96" Width="auto" HorizontalAlignment="Stretch"/>
</Grid>

Use a resizable control like Grid and put all the controls in Rows/Columns. Also set HorizontalAlignment to stretch for each control.

Plane projection and scale causing bluring in silverlight

Ok,
So I've tried to make an application which relies on images being scaled by an individual factor. These images are then able to be turned over, but the use of an animation working on the ProjectionPlane rotation.
The problem comes around when an image is both scaled and rotated. For some reason it starts bluring, where a non scaled image doesn't blur.
Also, if you look at the example image below (top is scaled and rotated, bottom is rotated) the projection of the top one doesn't even seem right. Its too horizontal.
http://img43.imageshack.us/img43/5923/testimages.png http://img43.imageshack.us/img43/5923/testimages.png
This this the code for the test app:
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Border Canvas.Top="25" Canvas.Left="50">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="3" ScaleY="3" />
</TransformGroup>
</Border.RenderTransform>
<Border.Projection>
<PlaneProjection RotationY="45"/>
</Border.Projection>
<Image Source="bw-test-pattern.jpg" Width="50" Height="40"/>
</Border>
<Border Canvas.Top="150" Canvas.Left="50">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup>
</Border.RenderTransform>
<Border.Projection>
<PlaneProjection RotationY="45"/>
</Border.Projection>
<Image Source="bw-test-pattern.jpg" Width="150" Height="120"/>
</Border>
</Canvas>
</UserControl>
So if anyone could possible shed any light on why this may be happening, I'd very much appreciate it. Suggestions also welcome! :)
** Update **
Just to clarify, if the projection plane rotation is 0, the image becomes un-blurred, so its only during the rotation that the image is blurred.

The top image's width is set to 50 and the height to 40. So it is downscaled. Afterwards you scale it up to the right size 150, 120. I guess Silverlight scales the image down and doesn't store the original size due to performance optmization. Leave the Scale out and set the right width and height for the first image.

It looks like the top image is being filtered as it is being drawn. From your code you have:
<Image Source="bw-test-pattern.jpg" Width="50" Height="40"/>
for the top image and
<Image Source="bw-test-pattern.jpg" Width="150" Height="120"/>
for the bottom one. You have different image sizes so the top one might be being upscaled and therefore blurred as it interpolates the missing pixels.
I'm not familiar with silverlight so I don't know how you'd control the filtering options, but setting the top line above to the same as the bottom one might fix it.