I've got a DataGrid with multiple columns. In one of the inner columns, I am displaying an image. This image needs to be rotated, so I used a TransformGroup to scale and rotate the image as needed.
If I do no rotate, using the following XAML, the image appears normally. As I change the width of the image column, the image scales as expected. It stays within the bounds of its column:
<GridViewColumn Header="Image" Width="200" x:Name="image_column">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Path=ImagePath}" Margin="5">
</Image>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Now if I attempt to rotate the image as necessary within the image column, things get weird. The column is still tied to the non-rotated image width, and the row height is tied to the non-rotated image height. The image also intrudes on its left neighbor's space. This is one variant of XAML that I have tried:
<GridViewColumn Header="Image" Width="200" x:Name="image_column">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Path=ImagePath}" Margin="5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.8" ScaleY="0.8" />
<RotateTransform Angle="90" CenterX="0" CenterY="0" />
<TranslateTransform X="{Binding ElementName=image_column, Path=Width}" />
</TransformGroup>
</Image.RenderTransform>
</Image>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
The TranslateTransform above is a complete hack to at least make the right edge of the image line up with the right edge of its column.
I've tried to add a Viewbox, thinking that the it would scale the way I want it to, with the rotated the image inside of it, but that didn't work.
Can anyone tell me what I am fundamentally missing here, and offer hints on how I can approach a solution? The only idea I have at this point is to rotate the image and save to disk before display.
You should set the LayoutTransform property instead of RenderTransform.
<Image.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Image.LayoutTransform>
As the column width is fixed, the ScaleTransform seems to be redundant.
<Image.LayoutTransform>
<RotateTransform Angle="90"/>
</Image.LayoutTransform>
Related
I've an Image component where I want to rotate the source :
<Image Name="ImageTarget" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Uniform" RenderTransformOrigin=".5,.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
<ScaleTransform ScaleY="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
<RotateTransform Angle="-90" />
</TransformGroup>
</Image.RenderTransform>
</Image>
I set the source of ImageTarget from the code.
Before the transformation (RenderTransformOrigin and RotateTransform) my window was like :
But after the rotation :
So, as you can see, the Width and Height has changed.
So my questions are:
Why the size has changed ?
How to align the rotated image on the top left corner (same as before) ?
Thanks
Edit: Size hasn't changed, I have taken the two different screenshots with a different size, and stackoverflow automatically resize them.
The problem is that the Transforms were applied after the layout pass. You should use a LayoutTransform to perform the transformation before the layout is calculated:
<Image Name="ImageTarget" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Uniform" RenderTransformOrigin=".5,.5">
<Image.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
<ScaleTransform ScaleY="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
<RotateTransform Angle="-90" />
</TransformGroup>
</Image.LayoutTransform>
I suggest you to use CompositeTransform instead of RotateTransform and ScaleTransform. Then you can call Rotate and TranslateX/TranslateY inside of the CompositeTransform tag to move your object.
In your code dimensions was changed because of ScaleX/ScaleY!
I think the title is pretty straightforward. I'm using some custom controls. I want to flip the tab header of a custom tab control. I tried a layout transform (ScaleTransform X = -1) to flip horizontally the tab header. But obviously I want the text inside not to be mirrored. I can't find a way so far.
You can do this by giving the TabItem a HeaderTemplate, and applying a ScaleTransform there also:
<TabControl>
<TabItem Header="Hello, World!">
<TabItem.LayoutTransform>
<ScaleTransform ScaleX="-1" />
</TabItem.LayoutTransform>
<TabItem.HeaderTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding}">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleX="-1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>
I'd like to resize a circle on my canvas with the help of a slider. This circle can be moved around on the canvas by some drag&drop stuff I did in code behind, so its position is not fixed.
I have bound the slider's value to an ellipse's height and width. Unfortunately, when I use the slider, the circle gets resized with its top left point (actually the top left point of the rectangle it's sitting in) staying the same during the operation.
I would like to resize it with its center point being constant during the operation. Is there an easy way to do this in XAML? BTW, I already tried ScaleTransform, but it didn't quite do what I wanted.
Thanks a bunch! :-)
Jan
<Canvas x:Name="MyCanvas">
<!-- this is needed for some adorner stuff I do in code behind -->
<AdornerDecorator Canvas.Left="10"
Canvas.Top="10">
<Ellipse x:Name="myEllipse"
Height="{Binding Path=Value, ElementName=mySlider}"
Width="{Binding Path=Value, ElementName=mySlider}"
Stroke="Aquamarine"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5">
<Ellipse.RenderTransform>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}" />
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
<Slider x:Name="mySlider"
Maximum="100"
Minimum="0"
Width="100"
Value="10"
Canvas.Left="150"
Canvas.Top="10" />
<Slider x:Name="myRotationSlider"
Maximum="360"
Minimum="0"
Width="100"
Value="0"
Canvas.Left="150"
Canvas.Top="50" />
</Canvas>
You can bind your Canvas.Left and Canvas.Top to your Height and Width via a ValueConverter.
Specifically (edit):
Create a property each for the Canvas.Left and Canvas.Top and bind to these.
Store the old values for Width and Heigth or the old slider value.
Whenever the slider is changed, get the incremental change "dx" by subtracting the stored value.
(Don't forget to update the stored value...)
Add dx to Width and Height property.
And, as Will said, add dx/2*-1 to Canvas.Left and Canvas.Top properties.
Does that make sense?
The problem is that you are using the SLIDER to adjust the width and height. Width and height are not calculated around RenderTransformOrigin; only RenderTransforms use that value.
Here's a corrected version (brb, kaxaml):
<Canvas x:Name="MyCanvas">
<!-- this is needed for some adorner stuff I do in code behind -->
<AdornerDecorator Canvas.Left="50" Canvas.Top="50">
<Ellipse
x:Name="myEllipse"
Width="10"
Height="10"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5"
Stroke="Aquamarine">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}"/>
<ScaleTransform
CenterX=".5"
CenterY=".5"
ScaleX="{Binding Path=Value, ElementName=mySlider}"
ScaleY="{Binding Path=Value, ElementName=mySlider}"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
<Slider
x:Name="mySlider"
Width="100"
Canvas.Left="150"
Canvas.Top="10"
Maximum="10"
Minimum="0"
SmallChange=".01"
Value="1"/>
<Slider
x:Name="myRotationSlider"
Width="100"
Canvas.Left="150"
Canvas.Top="50"
Maximum="360"
Minimum="0"
Value="0"/>
</Canvas>
Of course, this will probably not work for you. Why? Well, the ScaleTransform I used zooms not only the circle but also the border; as the circle gets bigger the border does as well. Hopefully you won't care about this.
Also, realize when combining transforms (scale then rotate in this case) that they are applied in order, and one may affect how another is done. In your case, you would not notice this. But if, say, you were doing a rotate and translate, the order would be relevant.
Ah, what was I thinking? Just stick the ellipse in a Grid (simplest solution but other containers would work). The grid automatically takes care of centering the ellipse as it is resized. No need for any value converters! Here's the code:
<Canvas x:Name="MyCanvas">
<!-- this is needed for some adorner stuff I do in code behind -->
<Grid Width="100" Height="100">
<AdornerDecorator>
<Ellipse
x:Name="myEllipse"
Width="{Binding Path=Value, ElementName=mySlider}"
Height="{Binding Path=Value, ElementName=mySlider}"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5"
Stroke="Aquamarine">
<Ellipse.RenderTransform>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}"/>
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
</Grid>
<Slider
x:Name="mySlider"
Width="100"
Canvas.Left="150"
Canvas.Top="10"
Maximum="100"
Minimum="0"
Value="10"/>
<Slider
x:Name="myRotationSlider"
Width="100"
Canvas.Left="150"
Canvas.Top="50"
Maximum="360"
Minimum="0"
Value="0"/>
</Canvas>
Since you're using a Canvas, the location an element has is the location. If you want the Top,Left position to change you need to do it yourself. If you were using another Panel type, like a Grid, you could change the alignment of your Ellipse to place it in the same relative location no matter what the size. You could get that effect by adding a Grid inside your AdornerDecorator and centering the Ellipse but you'd also need to set the AdornerDecorator or Grid to a fixed size because they won't stretch in a Canvas.
The best solution you could use would be a ScaleTransform applied to the RenderTransform property with a RenderTransformOrigin of 0.5,0.5. You said you had problems with ScaleTransform but not what the problem was.
Wrap your Ellipse in a Grid of the maximum size. As long as it is smaller, the Ellipse will be centered in the Grid:
<Grid
Canvas.Left="10"
Canvas.Top="10"
Width="100"
Height="100">
<AdornerDecorator>
<Ellipse x:Name="myEllipse"
Height="{Binding Path=Value, ElementName=mySlider}"
Width="{Binding Path=Value, ElementName=mySlider}"
Stroke="Aquamarine"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5">
<Ellipse.RenderTransform>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}" />
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
</Grid>
You may need to adjust your dragging logic to handle dragging the Grid instead of the Ellipse itself.
I've found a very easy way to do this in plain XAML: set Margin="-1000000". Read more here: Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF
When i try to add a text block to a border element, i only see part of the text. I rotate the text after adding it to the border and that is causing the problem. Increasing the width of the border fixes this issue. But, my border needs to be only 20 units wide.
alt text http://img257.imageshack.us/img257/1702/textcrop.jpg
What am i missing here?
<Border
Name="BranchBorder"
CornerRadius="0"
HorizontalAlignment="Left"
Width="20">
<TextBlock
Name="Branch"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center">
<TextBlock.RenderTransform>
<RotateTransform
Angle="-90"/>
</TextBlock.RenderTransform>
Branch
</TextBlock>
</Border>
Try using LayoutTransform
<Border
Name="BranchBorder"
CornerRadius="0"
HorizontalAlignment="Left"
Width="20">
<TextBlock
Name="Branch"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform
Angle="-90"/>
</TextBlock.LayoutTransform>
Branch
</TextBlock>
</Border>
There are bunch of blog entries describing the difference between RenderTransform and LayoutTransform and here is a cool visual demo from Charles Petzold RenderTransformVersusLayoutTransform.xaml
It appears as though the text is inheriting the <border> transformations before the rotation transform has a chance to rotate it. This means that the text first gets cropped to 20 units wide, and then gets rotated -90 degrees.
While I don't have an actual solution, I can confirm that its order of transformations that's causing the issue.
I want to create a TextBlock (or some other element with text in it for display only) that is vertical (-90 transform angle), but I want that element to fill up the vertical space it is contained in, but have a defined horizontal amount (I'm using vertical and horizontal terms instead of height and width since it's swapped when I have the TextBlock go vertical), and have it aligned to the left side of the container.
I believe I understand how to make a TextBlock go vertical using RenderTransform or LayoutTransform. However, I cannot seem to get the 'docking' to work properly, whenever I change the vertical aspect of the container the TextBlock increases in horizontal aspect instead of vertical.
Here is what I have:
<UserControl
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"
mc:Ignorable="d"
x:Class="AttendanceTracker.StudentView"
x:Name="UserControl" Height="172.666" Width="417.333">
<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
<Border BorderBrush="Black" BorderThickness="1" RenderTransformOrigin="0.5,0.5" Background="#52FFFFFF" Width="139.667">
<TextBlock Text="My Title" TextWrapping="Wrap" FontSize="18.667" TextAlignment="Center" Foreground="White" Margin="-58.509,68.068,49.158,70.734" Background="Black" RenderTransformOrigin="0.5,0.5" Width="147.017" d:LayoutOverrides="Height">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-90"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
</StackPanel>
Change the height of the UserControl and you will notice that the TextBlock increases in horizontal aspect instead of the desired vertical aspect.
If I understand you correctly, then this should point you in the right direction:
<StackPanel Orientation="Horizontal">
<TextBlock Background="Red" Text="My Title">
<TextBlock.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</TextBlock.LayoutTransform>
</TextBlock>
</StackPanel>
The key is to use LayoutTransform, not RenderTransform. This will ensure that another layout pass occurs after the transform occurs. Otherwise, the layout system is using the original bounding rectangle to layout the TextBlock.
Beyond that, I just got rid of all the Blend-generated cruft to see what was going on. Here's the result:
alt text http://img187.imageshack.us/img187/1189/screenshottbv.png