locked
Image Not Loading in Canvas Control ? RRS feed

  • Question

  • Hello World

    I am having a strange problem. I have added a Canvas Control in my Page and Image Brush as the background of that Canvas Control. I am binding ImageSource to that ImageBrush through my ImageViewModel. Everything works very fine. Now i need user to draw some shapes at RealTime on that Canvas Control. User also allowed to Zoom In and Zoom Out, Rotation of that Image. I Need to Adjust that Scale Transform of that Shapes if any. For that i have added ViewBox as the Parent on Canvas Control:

    Here is Xaml:

    <ScrollViewer VerticalScrollBarVisibility="{Binding Path=VerticalScrollBarVisibility}" Cursor="{Binding Path=ControlCursor}" Style="{Binding ScrollViewerStyleEXEGO}" UseLayoutRounding="True"  HorizontalScrollBarVisibility="{Binding Path=HorizontalScrollBarVisibility}" x:Name="Scroller">
                        <ScrollViewer.Resources>
                            <!--don't use that ViewModel:ElementSize for your code. this class specially design for this ImageViewer-->
                            <!--Height="{Binding Converter={StaticResource SizeConverterKey}, Path=ImageHeight}" Width="{Binding Converter={StaticResource SizeConverterKey}, Path=ImageWidth}"  -->
                            <ViewModel:ElementSize Element="{Binding ElementName=Scroller}" x:Name="ScrollerSize"></ViewModel:ElementSize>
                            <!--<Conv:ActualSizePropertyProxy Element="{Binding ElementName=Scroller}" x:Name="ScrollerSize"></Conv:ActualSizePropertyProxy>-->
                        </ScrollViewer.Resources>
                        <Border BorderBrush="Red" BorderThickness="3">
                            <Viewbox RenderTransformOrigin="0.5,0.5" StretchDirection="Both">
                                <Canvas Margin="2" RenderTransformOrigin="0.5,0.5" Height="{Binding ElementName=Scroller,Path=ActualHeight}" Width="{Binding ElementName=Scroller,Path=ActualWidth}">
                                    <!--<Canvas.Children>
                                    <Image Source="{Binding Path=ImageViewerViewModel.Image, Source={StaticResource Locator}}" Height="300" Canvas.ZIndex="0" Stretch="{Binding Path=ImageViewerViewModel.ImageStretch, Source={StaticResource Locator}}">
                                        <Intr:Interaction.Triggers>
                                            <Intr:EventTrigger EventName="ImageOpened">
                                                <Custom:EventToCommand Command="{Binding Mode=OneWay, Path=ImageViewerViewModel.ImageOpenedCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                                            </Intr:EventTrigger>
                                        </Intr:Interaction.Triggers>
                                    </Image>
                                </Canvas.Children>-->
                                    <Canvas.Background>
                                        <ImageBrush ImageSource="{Binding Path=Image}"  Stretch="{Binding Path=ImageStretch}">
                                            <Intr:Interaction.Triggers>
                                                <Intr:EventTrigger EventName="ImageOpened">
                                                    <Custom:EventToCommand Command="{Binding ImageOpenedCommand,Mode=OneWay}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                                                </Intr:EventTrigger>
                                            </Intr:Interaction.Triggers>
                                        </ImageBrush>
                                    </Canvas.Background>
                                    <Canvas.RenderTransform>
                                        <TransformGroup>
                                            <CompositeTransform Rotation="{Binding Path=RotationValue}"></CompositeTransform>
                                            <ScaleTransform x:Name="ScaleFactor" ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" ScaleY="{Binding ElementName=ZoomSlider,Path=Value}"/>
                                        </TransformGroup>
                                    </Canvas.RenderTransform>
                                    <Intr:Interaction.Behaviors>
                                        <Beha:ControlReference ControlType="Canvas" AttachedProperty="CanvasControl" SetControlToProperty="True"  ViewModelAddress="ImageViewerViewModel"></Beha:ControlReference>
                                    </Intr:Interaction.Behaviors>
                                    <Intr:Interaction.Triggers>
                                        <Intr:EventTrigger EventName="MouseMove">
                                            <Custom:EventToCommand Command="{Binding Path=ImageViewerViewModel.MouseMoveCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                                        </Intr:EventTrigger>
                                        <Intr:EventTrigger EventName="MouseLeftButtonDown">
                                            <Custom:EventToCommand Command="{Binding Path=ImageViewerViewModel.MouseLeftButtonDownCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                                        </Intr:EventTrigger>
                                        <Intr:EventTrigger EventName="MouseLeftButtonUp">
                                            <Custom:EventToCommand Command="{Binding Path=ImageViewerViewModel.MouseLeftButtonUpCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"></Custom:EventToCommand>
                                        </Intr:EventTrigger>
                                    </Intr:Interaction.Triggers>
                                </Canvas>
                            </Viewbox>
                        </Border>
                    </ScrollViewer>



    I having a Problem when user Strech the Image i Need to Manage the Scale Transform of Shapes as Well.

    Error that i am Getting :

    When i added Image Control as the Children on that Canvas Control my Image won't loaded dont know why. Please let me whats wrong in that.  

    Friday, June 8, 2012 1:44 AM