UWP - Zoom Image and scrollbar - image

I have write a simple code in XAML for zoom an Image
<Grid Grid.Row="1" Background="AliceBlue" Margin="10,10,10,10" Name="Griglia_Immagine">
<ScrollViewer Name="MyScrollViewer" MinZoomFactor="1" ZoomMode="Enabled">
<Image Name="Imm_Visualizzata" Source="Assets/Test.jpg" >
</ScrollViewer>
</Grid>
When i zoom the image it became more big.
On my right i can see the vertical scrool bar but i don't see the Horizontal one.
So... where the image is big i can move Up-Down ...but if i move left-right the image where i leave my finger the image return on left border.
I'had tried to set HorizontalScrollBarVisibility and VerticalScrollBarVisibility ...
If i set both to Hidden the start image is very big (original format) If i set both to Disabled the zoom not work.
If i set One on Hidden and one on Disabled the zomm work but i can move the image only vertival or horizontal... where i had set the Hidden value..
Anyone had solved it ?
Thanks

Related

Background Image Behind the ApplicationBar

I am loading an image on my page using
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="../Images/kisses.jpg" Stretch="Fill"/>
</Grid.Background>
...
This works great except for one thing. I'd like to use the same image as the splash screen and when the app is loaded and the splash screen goes away and the page background loads, I want the transition to be visually seamless. As it is, the image fills all 800 vertical pixels for when it's a splash screen and only (800 - ApplicationBarHeight) when it's a page background.
So I figured it was because I have it behind the LayoutGrid instead of behind the PhoneApplicationPage. But when I try to put it behind the PhoneApplicationPage (and make the LayoutGrid transparent) it doesn't work. Here's what I'm trying. Why doesn't this work?
<phone:PhoneApplicationPage.Background>
<ImageBrush ImageSource="../Images/kisses.jpg" Stretch="Fill"/>
</phone:PhoneApplicationPage.Background>
Thanks.
You should load the image in the LayoutRoot and set the opacity of the ApplicationBar to 99% - this way the image should be rendered with the full height / behind the AppBar.
Cannot test it myself at the moment, but if it doesn't work I will take a second look when I'm back in front of a PC :)
2 steps:
(1)
in <phone:PhoneApplicationPage
set shell:SystemTray.IsVisible = "False"
(2)
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="Assets/Images/Flowers.png"></ImageBrush>
</Grid.Background>

Windows Phone 7 Slider Accent Both Foreground and Background Colors

I need to create a slider with two colors, so that when you slide one direction or the other it appears as though one color has a higher percent over the other, or vice versa. However, when I apply the code below, wp7 automatically dims the background color, so it's not the proper color. The slider is in a list box which iterates over objects, so the colors are constantly changing. Any way to make the color of the foreground match the color of the background? (so that #ffffff would appear white on both sides of the slider, and not white on one and a gray on the other?)
Code is below.
<Slider
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="1"
Background="{Binding AwayTeam.Color}"
Foreground="{Binding HomeTeam.Color}"
FlowDirection=""
Value="4.7"
/>
Ok, so I'm adding some clarification. Look at the picture at this link. Slider Example
The bottom background (right hand side) is what I need the slider to look like, and that blue is what the color is supposed to look like. But, when I set that blue as the background color, wp7 makes it darker. The top slider is what wp7 currently does to the background color, and the bottom is what I need the background color to look like.
You just need to make a minor modification to the sliders template:
Open the project in Expression Blend.
Select the slider in the "Objects and Timeline" window.
Right click on it and select: Edit Template > Edit a copy
In the xaml for the template, find this line
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}"
Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
remove Opacity="0.2"
Accept this answer. :)

Icons in an Expression Blend tree view

I'm getting settled in with using Expression Blend, and there is one thing I am trying to do that I can not figure out for the life of me.
I want to have a tree where each text item has an icon before the text (trying to create something like a folder tree view). I created a sample data source and each item has two properties. An image and a line of text. the problem is that rather than the icon being before the text, the icon is really big and has a new line before the text. How do I correct this? Thanks for your help!
You can see what I'm getting here: http://imgur.com/daDaz.png
Edit:
The solution I came to involved editing the MainWindow.xaml. I set the property names in the data tab to 'TreeIcon' and 'TreeLabel', then I added an orientation attribute to the stackpanel and changed the icon height/width to something more agreeable:
<StackPanel Orientation="Horizontal">
<Image Source="{Binding TreeIcon}" HorizontalAlignment="Left" Height="24" Width="32"/>
<TextBlock Text="{Binding TreeLabel}"/>
</StackPanel>
Without the 'Orientation' attribute, it defaulted to vertical, so setting it to 'Horizontal' got the icon and text positioned properly. Setting the image height to 24 makes the icon roughly a good size for the text it's next to. The width is set to 32 because when it was at 24, the icon and the text were directly next to each other, with no padding at all. Upping the width to 32 padded some padding to the left.
Is this silverlight or WPF? Have you looked at your style template to find the content controls and see if they're set with a maxheight or maxwidth property and perhaps a stackpanel with Horizontal orientation?

how to update canavas layout after rotation in WP7?

I have a main page with 2 canvas like this:
<Canvas Name="main_canvas_color" Width="480" Height="800" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Name="main_canvas_image" Width="480" Height="800" HorizontalAlignment="Center" VerticalAlignment="Center">
</Canvas>
</Canvas>
the first one is filled by color the other one is filled by image. In PhoneApplicationPage_OrientationChanged event a swap width and height for both canvas. If i rotate a screen, it works fine, everything positioned correctly. If I add a Border element as a children to main_canvas_image and then rotate screen, main_canvas_image is not updated in a right way, it is shifted toward top right corner. If I open any another page and then go back after that, main_canvas_image is updated properly. So it seems that i have to force layout update, but i don't know how to do that. I tried UpdateLayout(); inside PhoneApplicationPage_OrientationChanged event, but it does not work. How can I update canvas layout in a right way?
Why bother ? The phone automatically adjust the size when you change the orientation. No reason to write code for it yourself.

XAML Usercontrol Image stretch to available size

I have an image as a drawing brush in xaml. The only property set is Stretch, which is set to Uniform.
The image is then set to the background of a usercontrol which has no properties set with regards to size.
The usercontrol is then used within a a grid, and set to span 2 rows like so:
<common:Logo
Height="130"
Width="500"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
/>
The problem is that there is loads of white space on top and below the image, which is also quite small.
The image started as a vector graphic and has no space above or below.
When I view the usercontrol with sizes set, it fits perfectly with no white space.
I am hoping this is not a problem with the grid reporting an incorrect size.
Any ideas would be appreciated!
Visual Studio was not refreshing any of the changes, running the code and reviewing what was produced fixed the whole problem!

Resources