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>
Related
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
I am using VS2013, Windows 8.1 and developing a windows store app.
Im creating a simple contacts - listview, that displays the contact details along with contact image within an ellipse. When I click on the listview item, I want to display the contact details on right side of the page. Now the issue I am facing is, I am not able to fit the contact image to the right size on the ellipse on the right side pane.
I am able to achieve it in my list view since its an smaller ellipse.
Important: I do not want the image to look stretched/Zoomed in /Zoomed out. It should exactly look like how it appears within the list view. (For list view , I have used Ellipse.Fill along with Imagebrush, but relatively smaller sized ellipse)
What I tried so far:
Ellipse.Fill property which paints the image to size, but the image looks stretched.
I tried setting "Stretch" property within the image tag within ellipse, but did not work.
I tried Image.clip, but I do not have "EllipseGeometry" option, instead only RectangleGeometry.
Lastly I created an image that has a transparent center and I place this frame over the contact image like a mask. This works well on some resolutions. But when some other resolution, the contact images which are binded from backend, go beyond the frame, although I set "MaxHeight" or "Height" properties.
I want to do it the right way, since I feel adding an image mask might not be a great way to achieve this. Please help!
I tried this for listview, n works fine, But the same code for right pane looks stretched (I have tried removing stretch attirbute, or tried other options like Stretch ="None" /"Uniform" etc )
I have attached screenshot.
Since code isn't clearly mentioned, you can do it with both Ellipse and Border. Here's the code snippet
<!--With Ellipse-->
<Ellipse Height="200"
Width="200">
<Ellipse.Fill>
<ImageBrush Stretch="Uniform"
ImageSource="Assets/profile.png" />
</Ellipse.Fill>
</Ellipse>
<!--With Border-->
<Border Height="200"
Width="200"
CornerRadius="150">
<Border.Background>
<ImageBrush Stretch="Uniform"
ImageSource="Assets/profile.png" />
</Border.Background>
</Border>
Here's the result
The properties "AlignmentX AlignmentY" within ImageBrush solved my issue.
If your image has portrait orientation, then you can use Stretch, AlignmentX, AlignmentY properties of ImageBrush like this to achieve best preview result
<Border CornerRadius="20" BorderThickness="1" BorderBrush="DarkGoldenrod">
<Ellipse Width="40" Height="40">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding PractitionerPhoto}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Top" />
</Ellipse.Fill>
</Ellipse>
</Border>
Is it possible to add a background image to an AdControl? Or is it possible to place an AdControl over an image and give it a transparent background?
I have been trying several things to try to accomplish this - no luck so far.
You can try putting a AdControl inside a Border Control. You can set the Image to a Border Control.
<Border Background="Red">
<AdControl id="adControl1" height=80 width="480" />
</Border>
Most of the Ads have a Transparent Background.
Hope this helps.
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.
Here is a simple XAML snippet:
<Grid x:Name="ContentGrid">
<ContentControl Background="Yellow" VerticalAlignment="Stretch"></ContentControl>
</Grid>
In WPF, the content control stretches the entire height of the grid.
In WP7 however, the content control does not stretch.
Why?
Avoid using ContentControl directly.
If you use something which inherits from it, such as a button, then, in a grid, as per your example, you'll automatically get horizontal and vertical stretching.
This will creat a button with a yellow background which fills the screen:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Background="Yellow" />
</Grid>
However, if you just wanted a yellow background to your grid - which is all your sample would do - you could just set the background property on the grid itself.
I fixed this by defining my own template:
<ContentControl><ContentControl.Template><ControlTemplate><ContentPresenter/> ...
Not sure why it fixes it but it works....