locked
Rotation Image In Grid ? RRS feed

  • Question

  • Hello World 

    I am an image control in grid and i have to rotate the grid as per user selected Angle. but i am getting a design error when i rotote image to 90 degree angle the some part of image set out of grid....Please let me know what is the better and easy way to rotate image..

    this is the result 

    https://skydrive.live.com/redir.aspx?cid=4ac49aa25f1e872e&resid=4AC49AA25F1E872E!143&parid=root

    here is my xaml code

    <Grid x:Name="LayoutRoot" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Transparent">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisualStateGroup">
                    <VisualState x:Name="Hovered">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="border">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="125">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <PowerEase EasingMode="EaseOut"/>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Leave">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="border">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="125"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <PowerEase EasingMode="EaseIn"/>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <telerik:RadBusyIndicator x:Name="radIsBusy"  IsIndeterminate="True" IsBusy="{Binding Path=IsBusy}" BusyContent="{Binding Path=ImageViewerViewModel.PositionContent, Mode=OneWay, Source={StaticResource Locator}}">
                <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Border x:Name="ImageControlGrid" CornerRadius="5" Height="30" VerticalAlignment="Top" Opacity="0.50" Visibility="{Binding Path=ButtonsVisibility}" Canvas.ZIndex="1">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF191A18" Offset="0"/>
                                <GradientStop Color="#FF40413E" Offset="1"/>
                                <GradientStop Color="#FF333432" Offset="0.183"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <Grid>
                            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To First Page" Command="{Binding Path=FirstCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/First.png" Stretch="Fill" Width="20"/>
                                </Button>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To Previous Page" Command="{Binding Path=PreviousCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/Previous.png" Stretch="Fill" Width="20"/>
                                </Button>
                            </StackPanel>
                            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="90,0,0,0">
    
    
                                <Rectangle Width="0.5" Margin="5,0,5,0">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFA1A1A1" Offset="0.517"/>
                                            <GradientStop Color="#FF434343" Offset="1"/>
                                            <GradientStop Color="#FF434343" Offset="0.022"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <TextBlock Text="Showing " VerticalAlignment="Center" Foreground="White"></TextBlock>
                                <TextBox Height="22" BorderBrush="#FF1B1B1B"  Background="{x:Null}" x:Name="TBGoToPage" MaxLength="3" Foreground="#FFFCF4F8" Margin="2,4" Width="25" Text="{Binding Path=ImageViewerViewModel.GoToPageIndex, Mode=TwoWay, Source={StaticResource Locator}}" TextAlignment="Center" VerticalAlignment="Center">
                                </TextBox>
                                <TextBlock Text="{Binding Source={StaticResource Locator}, Path=ImageViewerViewModel.ImagesPathList.Count,Converter={StaticResource StringConverterKey}}" VerticalAlignment="Center" Foreground="White"></TextBlock>
                                <Rectangle Width="0.5" Margin="5,0,5,0">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFA1A1A1" Offset="0.517"/>
                                            <GradientStop Color="#FF434343" Offset="1"/>
                                            <GradientStop Color="#FF434343" Offset="0.022"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Zoom In" Command="{Binding Path=PreviousCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/ZoomIn.png" Stretch="Fill" Width="20"/>
                                </Button>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Zoom Out" Command="{Binding Path=PreviousCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/ZoomOut.png" Stretch="Fill" Width="20"/>
                                </Button>
                                <Grid>
                                    <StackPanel Orientation="Horizontal" x:Name="RotationPanel">
                                        <Rectangle Width="0.5" Margin="5,0,5,0">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFA1A1A1" Offset="0.517"/>
                                                    <GradientStop Color="#FF434343" Offset="1"/>
                                                    <GradientStop Color="#FF434343" Offset="0.022"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Button Height="28" Margin="4,0,4,0" Style="{StaticResource ButtonStyleToolbar}" Content="Rotation" Foreground="White" MouseEnter="Button_MouseEnter">
    
                                        </Button>
                                        <TextBlock Margin="3,0,0,0" Text="{Binding Source={StaticResource Locator}, Path=ImageViewerViewModel.SelectedRotation, FallbackValue=0}" VerticalAlignment="Center" FontSize="17.333" HorizontalAlignment="Center" Foreground="#FF3AA5C0"></TextBlock>
                                        <Ellipse Width="4" Stroke="#FF3AA5C0" StrokeThickness="2" Height="4" Fill="#FF3AA5C0" VerticalAlignment="Top" Margin="0,6,0,0"></Ellipse>
                                        <Rectangle Width="0.5" Margin="5,0,5,0">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFA1A1A1" Offset="0.517"/>
                                                    <GradientStop Color="#FF434343" Offset="1"/>
                                                    <GradientStop Color="#FF434343" Offset="0.022"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </StackPanel>
    
                                </Grid>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To Last Page" Command="{Binding Path=LastCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/FitToHeight.png"  Stretch="Fill" Width="20"/>
                                </Button>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To Last Page" Command="{Binding Path=LastCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/FitToWidth.png"  Stretch="Fill" Width="20"/>
                                </Button>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To Last Page" Command="{Binding Path=LastCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/FitToWindow.png"  Stretch="Fill" Width="20"/>
                                </Button>
                            </StackPanel>
                            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To Next Page" Command="{Binding Path=NextCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/Next.png" Stretch="Fill" Width="20"/>
                                </Button>
                                <Button Height="28" Width="28" Opacity="1" Style="{StaticResource ButtonStyleToolbar}" ToolTipService.ToolTip="Go To Last Page" Command="{Binding Path=LastCommand}" Visibility="{Binding Path=ButtonsVisibility}">
                                    <Image Height="20" Opacity="1" Source="/PlanetData.ExegoReview.Client;component/Images/ImageViewer/Last.png" Stretch="Fill" Width="20"/>
                                </Button>
                            </StackPanel>
                        </Grid>
                    </Border>
                    <Image x:Name="ImageTiff" Canvas.ZIndex="0" Height="{Binding RelativeSource={RelativeSource AncestorLevel=2, AncestorType=Grid},Mode=OneWay,Converter={StaticResource SizeConverterKey},Path=RowDefinations[0].Height}" Width="{Binding RelativeSource={RelativeSource AncestorLevel=2, AncestorType=Grid},Mode=OneWay,Converter={StaticResource SizeConverterKey},Path=ColumnDefinations[0].Width}" Source="{Binding Path=Image}" RenderTransformOrigin="0.5,0.5" Margin="2">
                        <Intr:Interaction.Triggers>
                            <Intr:EventTrigger EventName="ImageOpened">
                                <Custom:EventToCommand Command="{Binding ImageOpenedCommand,Mode=OneWay}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                            </Intr:EventTrigger>
                        </Intr:Interaction.Triggers>
                        <Image.RenderTransform>
                            <CompositeTransform Rotation="{Binding Path=RotationValue}"></CompositeTransform>
                        </Image.RenderTransform>
                    </Image>
                    <StackPanel x:Name="EmptyMessage" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,20,0,0" Visibility="{Binding Path=EmptyMessageVisibility}">
                        <TextBlock Text="{Binding Path=EmptyMessage}" Foreground="WhiteSmoke" FontSize="20"></TextBlock>
                    </StackPanel>
                    <Border x:Name="border" HorizontalAlignment="Left" Margin="290,30,0,0" Height="0" Canvas.ZIndex="1" VerticalAlignment="Top" Width="100" Background="#FF333432" Opacity="0.50" Visibility="Visible" MouseLeave="border_MouseLeave">
                        <StackPanel>
                            <Button Height="28" Margin="4,0,4,0" Style="{StaticResource ButtonStyleToolbar}" Command="{Binding Path=RotationSelection}" Content="90" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"  Foreground="White" FontSize="13.333"/>
                            <Button Height="28" Margin="4,0,4,0" Style="{StaticResource ButtonStyleToolbar}" Command="{Binding Path=RotationSelection}" Content="180" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"  Foreground="White" FontSize="13.333"/>
                            <Button Height="28" Margin="4,0,4,0" Style="{StaticResource ButtonStyleToolbar}" Command="{Binding Path=RotationSelection}" Content="270" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"  Foreground="White" FontSize="13.333"/>
                            <Button Height="28" Margin="4,0,4,0" Style="{StaticResource ButtonStyleToolbar}" Command="{Binding Path=RotationSelection}" Content="Reset" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"  Foreground="White" FontSize="13.333"/>
                        </StackPanel>
                    </Border>
                </Grid>
    
            </telerik:RadBusyIndicator>
    
        </Grid>
    Friday, March 30, 2012 8:19 AM

All replies

  • Hi Ravi,

    Check below image rotation sample

    http://www.c-sharpcorner.com/Resources/787/how-to-rotate-images-in-silverlight.aspx 

    Regards

    Jack

    Friday, March 30, 2012 9:58 AM
  • thanks for reply sir....

    Tuesday, April 3, 2012 12:06 AM
  • I have shared an image of my screen....when i apply Rotation like you suggest

    i Found this result at 180 angle
    https://skydrive.live.com/redir.aspx?cid=4ac49aa25f1e872e&resid=4AC49AA25F1E872E!144&parid=root
    <Image x:Name="ImageTiff" Canvas.ZIndex="0" Height="{Binding RelativeSource={RelativeSource AncestorLevel=2, AncestorType=Grid},Mode=OneWay,Converter={StaticResource SizeConverterKey},Path=RowDefinations[0].Height}" Width="{Binding RelativeSource={RelativeSource AncestorLevel=2, AncestorType=Grid},Mode=OneWay,Converter={StaticResource SizeConverterKey},Path=ColumnDefinations[0].Width}" Source="{Binding Path=Image}" RenderTransformOrigin="0.5,0.5" Margin="2">
                        <Intr:Interaction.Triggers>
                            <Intr:EventTrigger EventName="ImageOpened">
                                <Custom:EventToCommand Command="{Binding ImageOpenedCommand,Mode=OneWay}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                            </Intr:EventTrigger>
                        </Intr:Interaction.Triggers>
                        <Image.RenderTransform>
                            <RotateTransform Angle="{Binding Path=RotationValue}" CenterX="100" CenterY="100"></RotateTransform>
                            <!--<CompositeTransform Rotation="{Binding Path=RotationValue}"></CompositeTransform>-->
                        </Image.RenderTransform>
                    </Image>
    
    
    Tuesday, April 3, 2012 12:19 AM