Simple question,
SilverLight 3 application (no toolkit).
I want to use an image and a slider.
The image is displayed fit to screen on load, and then the slider has to zoom-in and out the image when its value changes. I don't want to use anything else, like deepzoom. How can this be done?
Urgent, Thanks in advance,
The xaml code below :
<ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<layout:LayoutTransformer x:Name="layout" Background="{x:Null}" >
<layout:LayoutTransformer.LayoutTransform>
<ScaleTransform x:Name="contentScale" ScaleX="1.0" ScaleY="1.0" />
</layout:LayoutTransformer.LayoutTransform>
<Image x:Name="img" Source="../pin.PNG" >
</Image>
</layout:LayoutTransformer>
</ScrollViewer>
And on the slidervaluechangedevent :
this.contentScale.ScaleX = this.contentScale.ScaleY = e.NewValue;
this.layout.ApplyLayoutTransform();
LayoutTransformer is ther in toolkit, add its reference:
System.Windows.Controls.Layout.Toolkit
Without having a toolkit, u can do it but it doesn't work properly(it will never update the scrollviewer)...try it the below one :
<ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Themes:ThemeManager.StyleKey="TreeScrollViewer">
<Image x:Name="img" Source="../charge_chargeline.PNG" >
<Image.RenderTransform>
<ScaleTransform x:Name="contentScale" ScaleX="1.0" ScaleY="1.0" />
</Image.RenderTransform>
</Image>
</ScrollViewer>
And on the slidervaluechangedevent :
`this.contentScale.ScaleX = this.contentScale.ScaleY = e.NewValue`;
Hope it helps :)....
Related
Hi I'm struggling with rotation in XAML. I found a solution that LayoutTransform should solve this issue, but on Windows Universal Plattform this option isn't available!
This is my Code:
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Center">
<Rectangle Fill="Red" Height="100" Width="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
Text="long long long long long long long long text"
RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="Green" Height="100" Width="100" />
</StackPanel>
But as you can see there are an huge margin between the colored boxes and the textblock as you can see here:
So my first guess was to add an Width="30" property to the textblock, but this isn't working as you can see here (not only the offset is the problem, but the cropping is the problem):
Any suggestions?
Try the LayoutTransform control of the WinRTXamlToolkit. Following links should help.
Github Source link and Demo link
In an Windows Phone 7 application, I want to apply a 90º rotation to an image when the user clicks a button. I'm doing the following:
<Image Height="369" Name="imageView" Stretch="Uniform" Width="394">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
At the function:
((RotateTransform)imageView.RenderTransform).Angle += 90;
So far, so good. The problem appears when I place the image within a scrollviewer.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="389" HorizontalAlignment="Left" Margin="12,78,0,0" Name="scrollViewer" VerticalAlignment="Top" Width="409">
<Image Height="369" Name="imageView" Stretch="Uniform" Width="394">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
</ScrollViewer>
In this case I get an error - InvalidCastException was unhandled - on this line of code:
((RotateTransform)imageView.RenderTransform).Angle += 90;
The problem is that imageView.RenderTransform is not a RotateTransform then, but of CompositeTransform instead, so try this instead:
((CompositeTransform)imageView.RenderTransform).Rotation += 90;
And if you want to specify it as a Composite transform directly in the XAML too, you can do that:
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="389" HorizontalAlignment="Left" Margin="12,78,0,0" Name="scrollViewer" VerticalAlignment="Top" Width="409">
<StackPanel>
<Image Height="369" Name="imageView" Stretch="Uniform" Width="394" Source="/PhoneApp2;component/Images/lumia-920-rainbow.png">
<Image.RenderTransform>
<CompositeTransform Rotation="0" CenterX="197" CenterY="184" />
</Image.RenderTransform>
</Image>
<StackPanel>
</ScrollViewer>
I am developing an application where i want to browse images like native WindowsPhone form.
I have used Pivot control. Everything works, but there is one unwanted thing. The image does not fill all display area. There is a gap on the top of page. I have set margin and padding everywhere where it is possible. And the result is still the same. :(
Here is my XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid
x:Name="LayoutRoot"
Background="Transparent"
Margin="0">
<toolkit:PerformanceProgressBar
VerticalAlignment="Top"
HorizontalAlignment="Left"
IsIndeterminate="{Binding IsBusy}"
Visibility="{Binding IsBusy, Converter={StaticResource BoolToVisibilityConverter}}"
/>
<controls:Pivot
x:Name="PhotoPivot"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
IsHitTestVisible="True"
ItemsSource="{Binding Photos}"
Margin="0"
Padding="0"
>
<controls:Pivot.HeaderTemplate>
<DataTemplate/>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate >
<controls:PivotItem
x:Name="PhotoPivotItem"
Margin="0"
>
<Image
x:Name="PhotoPicture"
Source="{Binding}"
Stretch="Uniform"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0"
/>
</controls:PivotItem>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>
Are you talking about the system tray?
To remove the system tray use the following code:
shell:SystemTray.IsVisible="False"
Update:
I'm not real sure why that extra space is there.
I created a simplified version of your example and the only thing I could think of is to use negative margins. There is probably a better solution that I am just overlooking, but for now you can just use the following:
<controls:PivotItem x:Name="PhotoPivotItem" Margin="0,-10,0,0">
Although, from your posted image, it looks as if you have a bigger gap than I did, so you might need to decrease the margin.
I have a StackPanel containing five images and I want to put a black border around each image.
The XAML I have at the moment is:
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top" />
I thought I would be just able to put a one-unit margin or padding on the image and set a background color to 000000 but Padding and Background are both invalid for images.
What is an easy way to do this in XAML? Do I really have to put each image inside another control to get a border around it or is there some other trickery I can use?
Simply wrap the Image in a Border control
<Border BorderThickness="1">
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top" />
</Border>
You could also provide a style you apply to images that does this if you don't want to do it around every image
Final solution from answer and comments added by Pax:
<Border BorderThickness="1"
BorderBrush="#FF000000"
VerticalAlignment="Top">
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top"/>
</Border>
The accepted answer will not work because of the problem described here
https://wpf.2000things.com/2011/04/17/279-adding-a-border-around-an-image-control/
I solved it this way.
<Viewbox>
<Border BorderThickness="3" BorderBrush="Red">
<Image Stretch="None" ></Image>
</Border>
</Viewbox>
I just stumbled upon this post and the other answer did not work right. Maybe because I now use framework 4 and this post is old?
In any case - if someone will see this by chance in the future - here is my answer:
<Border Name="brdSiteLogo"
BorderThickness="2"
BorderBrush="#FF000000"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="12,112,0,0"
Height="128"
Width="128">
<Image Name="imgSiteLogo"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"/>
</Border>
The border thickness and brush are important (if you wont choose a color - you will not see the border!!!)
Also, the border should be aligned on your window. The image is "inside" the border, so you can use margins or just stretch it like I did.
Please pardon my ignorance- I'm very new to WPF.
I am looking to implement a minor, visual effect in my application that gives the look of "inner" rounded corners. The window in question has a dark border that encapsulates several UIElements, one of which is a StatusBar, located at the bottom of the window. This StatusBar has a dark background that matches the window's border. Above the StatusBar is a content view, which is currently a Grid- its background is semi-transparent (I think that this is something of a constraint- you can see through the content view to the desktop below). I would like for the content view (represented by the transparent, inner area in the figure below) to have the look of rounded corners, though I expect to have to sort of create the illusion myself.
(Can't post the image because I'm a lurker and not a poster- please find the drawing here)
My first approach was to add a Rectangle (filled with the same, dark color as the border) immediately above the StatusBar and to assign a Border with rounded corners to its OpacityMask (similar to the solution proposed by Chris Cavanagh**). Sadly, the effect that is produced is the exact opposite of that which I am trying to achieve.
I understand that the Clip property can be of use in this sort of situation, but it seems to me that using any sort of Geometry will prove to be inadequate as it won't be dynamically sized to the region in which it resides.
EDIT: Including my XAML:
<Grid Background="{StaticResource ClientBg}" Tag="{Binding OverlayVisible}" Style="{StaticResource mainGridStyle}">
<DockPanel LastChildFill="True">
<!-- Translates to a StackPanel with a Menu and a Button -->
<local:FileMenuView DockPanel.Dock="Top" />
<!-- Translates to a StatusBar -->
<local:StatusView DockPanel.Dock="Bottom" />
<!-- Translates to a Grid -->
<local:ContentView />
</DockPanel>
</Grid>
Any pointers are more than welcome- I'm ready to provide more indepth detail if necessary.
** http://www.dotnetkicks.com/wpf/WPF_easy_rounded_corners_for_anything
EDIT: Now I got what you mean. In fact you can use Path + OpacityMask approach. You have to draw "inverted" path, to use it as opacity mask. But I have simpler and faster solution for you :). Use Border + CornerRadius, and fill the gaps with solid paths. Just try the following code in Kaxaml and let me know if this is what you were looking for:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240"
Height="320"
AllowsTransparency="True"
Background="Transparent"
WindowStyle="None">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Border Background="Black"/>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="5">
<Grid>
<Border Background="White" CornerRadius="0, 0, 5, 5" Opacity="0.7"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<TranslateTransform X="15"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Border Grid.Row="2" Background="Black"/>
</Grid>
</Window>
PS: You can simplify this solution by avoiding render transforms, but you got the idea.