I am developing a Windows Store app and I've done this before, months ago, but all of a sudden, in this new app, I can't get the image to display inside the button (properly).
<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Button>
As you can see, the code is fine (unless things have changed drastically, which by the looks of it they haven't). So what gives? This is the only code I have so far in my XAML file other than the defauls that VS generates as it's a new Project.
P.S. I've also tried taking out the StackPanel and just having Button > Image, but this produces the same result.
So, when the BUtton displays at runtime, all I can see is a very tiny, 2pixels of the image (but the image is actually 32x32pixels. How do I properly display an "Image Button"?
The problem is that your Width and Height for the button are far too small. You've made it 32x32 pixels, but the button will use almost all of that itself for the space it leaves around the visible border, the border itself, and the padding between the border and the button's content.
(It leaves space around the edge to provide a larger hit target than the visible appearance. This is useful on touchscreens, where accurate finger placement is difficult.)
All that's left for your image is a few pixels.
You'll need to make the button about 62x52 pixels to leave enough space in the middle for a 32x32 pixel bitmap.
You could get away with a slightly smaller button if you explicitly set smaller Margin and Padding properties, although as mentioned above, the margin is there for a reason.
You have a couple options, the Padding property for instance is Template bound with some pre-set padding added to it. So with your Button having a fixed Height and Width set to 32 something as simple as setting Padding="0" could fix it for you depending on the actual size of your Image.
If worse comes to worse though, you could always just make your own Button Template. There's a couple easy ways to do this. One of which would be just go make a copy of the default Button Template, rip out all the Padding/Margin/Height/Width crap preset in there and just change its name then apply your new template directly to your button like;
<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"
Style="{StaticResource YourCustomButtonTemplateForImages}">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/>
</Button>
Or... another option would be, embed your Image inside of a ViewBox inside your button and it will fit and re-scale itself accordingly to its set available size.
Oh, you might also want to make your Background="Transparent" while you're at it to make it look a little cleaner as just an image.
Hope this helps.
Related
I have a grid, which has 2 rows and 3 columns.
I need 2 background images for my grid - one will be on the top of the other. (ZIndex of one background should be bigger than other background has). How can I achieve this?
I will need to swap these 2 backgrounds frequently, which means the top background will become lower background and lower background will become top background. Apart from that, images of these two backgrounds are gonna change a lot too.
This example has grid, which contains text switcher at the bottom. As a background, it has a picture of room. When I click 'next' button in the text switcher, I want the top background picture to gradually disappear (doubleAnimation updates opacity) and show lower background under it. Maybe I can achieve gradual switching of backgrounds in a better way, but I honestly dont know how to do it.
You can draw them as two images on a Canvas inside a VisualBrush and use that as your background:
<Grid>
<Grid.Background>
<VisualBrush>
<VisualBrush.Visual>
<Canvas Width="256" Height="256">
<Image Source="image1.png" Panel.ZIndex="1" /> <!-- This will appear over top of the other one -->
<Image Source="image2.png" Panel.ZIndex="0" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
Source and Panel.ZIndex can then be set either directly in code-behind or via data binding.
This is a bit of an unsual way of going about this though, there's almost certainly a better way of doing whatever it is you're actually trying to do.
In this case I would use databinding to bind to a property in the view model that stores the background image. When the condition changes and the view model property is changed the UI will reflect those changes.
I'm making a sort-of toolbar in WPF (StackPanel containing Buttons containing StackPanels containing Images and TextBlock...)
Here is the code for one button :
<Button x:Name="btnGraph" FontWeight="Normal" Background="{DynamicResource accentColor}" BorderBrush="{DynamicResource accentColor}">
<StackPanel>
<Image Source="Resources/diagnostic_chart1.png" Stretch="None"/>
<TextBlock HorizontalAlignment="Center" Text="Graph"/>
</StackPanel>
</Button>
As you can see, the image in the button is stretched, but the same image code outside the button (in the container StackPanel), it works correctly : image
I've tried a lot of things, but nothing worked.
Is there a way to make it works ?
EDIT: I also tried changing the DPI of images from 72 to 96, no effect.
The image doesn't look stretched to me; the size seems right. It actually looks like it's rendering across pixel boundaries, giving it a blurred appearance. Try setting UseLayoutRounding="True" on your root visual.
I'm writing a windows phone app and I would like to implement a "tap text to expand" feature.
I have a series of TextBlocks that currently look much like this repeated multiple times:
<TextBlock
Name="description" HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="12,40,0,0" Width="444"
TextWrapping="NoWrap" TextTrimming="WordEllipsis" />
[Note the last two: TextWrapping="NoWrap" TextTrimming="WordEllipsis" and the lack of Height being set.]
This shows one line, and when the line is longer than the screen it ends in ellipsis, which is perfect. Currently, when the user taps the TextBlock I turn TextWrapping to Wrap. This allows the text to take as many lines as it needs (the functionality I want).
The problem is that when I turn TextWrapping to Wrap it expands into the TextBlock below it (remember, I have a bunch of these packed next to each other). Also, to get it to expand fully I never initially set Height, so if I try to access it later I get NaN (and ActualHeight never changes from 26.6, no matter how many lines it expands to be)
I'm looking for a way to dynamically push the TextBlocks below it down the amount necessary to display the text in its entirety, but I don't know the "correct" way to go about it. (on a similar note: hardcoding Margin is unideal, especially for dynamicly expanding text, is there a "RelativeLayout" (or something similar) that I've been unable to find? )
Have you tried placing your TextBlocks in a StackPanel? This should prevent the TextBlock objects from overlapping and you can set their individual margin values to ensure the spacing you want.
i am currently working on a sample for a lib that i wrote,designed to execute WebRequests such as POST and GET safely. At the moment i am trying to figure out a way to show the response of the request (Usually, HTML text) in my window.
It does not need to be fancy,but i thought about a Textblock that can scroll,but i can't seem to make mine works.
Here is what i am trying:
<ScrollViewer Height="439" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="546,19,0,0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="Scroller">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="100" Width="433"
TextWrapping="Wrap" Name="block" Height="440" />
</ScrollViewer>
What happens is that my content scrolls,but it does not appears fully in the window,it gets cut for some reason and i can't see all of the return.
Any other advice of how to do it ?
Thanks !
The Height of the TextBlock is fixed at 440. You should remove that.
You have way too many hard-coded sizes, remove the Width and Height of the TextBlock. If you want it to scroll you need to allow it to take all the space it wants.
Your scrollviewer is handling the scrolling and that is what requires the fixed height, as #Erno said the TextBlock within is also fixed height and it shouldn't be.
The content within the ScrollViewer should be as high as it needs to be, the ScrollViewer will handle the scrolling of that based on it's own height.
There is a Canvas in our application where an image is loaded. We need to provide buttons such as "Add Placemark" on top right corner of the image such that the button highlights on focus.
There are PNG files for these controls. How can I make these PNG behave as buttons (change visual state on hover, onclick etc). I tried to add <Image> in <Button>, but it shows the opaque button on top of the Canvas.
<Button Height="23" HorizontalAlignment="Right" Name="btnAddPlacemark" Margin="3" VerticalAlignment="Top" Width="23" Click="btnAddPlacemark_Click">
<Image Source="/Map_SL;component/Images/PlaceMark.png" Stretch="Fill" />
</Button>
Sounds like you are going to recreate all the logic of a button, simply to remove the border/background. Remember every control in Silverlight is simply skinned and therefore infinitely configurable.
You do want to use a normal button with an image, then restyle the button to remove the parts you don't want. I realise this seems daunting at first, but there are simplified basic skins available to simplify that task, or you can use Expression Blend (if you have access to it or can afford it).
Try this link from the master himself:
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx