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.
Related
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>
Good day, I want to have my canvas have rounded corners. i know you place the canvas inside a Border Tag and round from there like
<Border>
<Canvas>
</Canvas>
</Border>
Now the solutions i have seen, they have an element in their Xaml called ClipToBounds Which makes the canvas adjust to the border but it is not present for SilverLight. so is there a way i can have this feature or an alternative so that the Canvas clips correctly to the Border? Thanks in Advance.
P.S i know i can set the canvas to transparent and the border background to the background i want the canvas to take, but am still learning windows phone so am trying to know as much solutions as possible in case that always doesn't work. Thank you
You can use Canvas.Clip:
<Canvas Height="100" Width="100" Background="white">
<Canvas.Clip>
<EllipseGeometry Center="50, 50" RadiusX="68" RadiusY="68" />
</Canvas.Clip>
</Canvas>
Also, here's a handy tutorial if you wish to define your own ClipToBounds behaviour:
http://www.codeproject.com/Articles/36495/Silverlight-ClipToBounds-Can-I-Clip-It-Yes-You-Can
Is it possible to put a image into a control in WinRT and then let the user zoom in and out etc?
Yes!
The easiest possible way is to put it inside a scrollviewer. You can zoom in and out whatever you like that way!
<ScrollViewer MaxZoomFactor="3"
MinZoomFactor="0.5"
ZoomMode="Enabled">
<Image Source="/Assets/logo.png" Width="200" Height="200"/>
</ScrollViewer>
Background
I'm a noob on Windows Phone 8. I've learnt WPF and Silverlight in the past, but it was long ago.
On Windows phone 8, I have a clickable Image control which I wish to have its content (the picture itself) to have rounded corners.
The question
How do I set rounded corners to a control?
Also, I might consider having a Button control instead, so that I could customize what happens when it is being clicked (or touched). Upon clicking, I would like that the area that has the rounded corners would be colored in some color, showing that it was indeed being clicked/touched. How do I do that?
EDIT:
Thanks to #Depechie, I've found this solution:
<Grid>
<Border Height="200" Width="250" CornerRadius="0,0,50,50">
<Border.Background>
<ImageBrush ImageSource="Images/Desert.jpg" />
</Border.Background>
</Border>
</Grid>
However, I have two problems with that:
I still can't find how to make it seen as clicked when you touch it, so that the rounded corners would have a yellow background.
I can't get the imageSource and the converter (and its parameter) via code when handling the clicking event. Previously, I've used:
Image thumbnailImage = (Image)sender;
var bindingExpression = thumbnailImage.GetBindingExpression(Image.SourceProperty);
string selectedItem = (string)bindingExpression.DataItem;
string selectedThumbnailIndex = (string) bindingExpression.ParentBinding. ConverterParameter;
Maybe I could create the items programmatically instead of Xaml? If so, how (items are in a grid, btw)?
What can I do now?
Try this by using Rect
<Image VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="None"
Source="Jellyfish.jpg">
<Image.Clip>
<RectangleGeometry RadiusX="5"
RadiusY="5"
Rect="0,0,150,113"/>
</Image.Clip>
</Image>
Here is the another link
https://msdn.microsoft.com/en-us/library/ms750631(v=vs.110).aspx
There is a similar question listed here...
Maybe those can help you too?
And if you want to have the ilusion that the image is a clickable control, take a look at TiltEffect that is available in the Phone toolkit
Instead of attempting to alter the shape of a control (Which after looking in VS and Blend I dont think is possible) Why not simply create your image with rounded edges and then set the button border and background to no color?
For the rounded corners, you can set the RadiusX and RadiusY values to nonzero numbers to achieve that effect in a rectangle. So I imagine you could embed a button inside the rectangle if you want to keep the button control.
<Image Width="25" Height="25" VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="Fill"
>
<Image.Clip>
<RectangleGeometry RadiusX="12.5"
RadiusY="12.5"
Rect="0,0,25,25"/>
</Image.Clip>
</Image>
The corner radius should be half of width or height.
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>