Develop Reference

Windows Phone 8 ScrollViewer.CanContentScroll not recognized?

I am a newbie to Windows Phone 8 app programming in C# and I am trying to create an array of textboxes. I have the array being created and being added as children of a Stack Panel, and I am trying to get it to display more than a few textboxes, and I read that it can be done if the CanContentScroll property is set to 'true' as it is set to 'false' by default. However, when I try to add it, it is not recognised by intellisense. Can you help me?
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" Margin="10,135,10,7" >
<StackPanel x:Name="TextBoxStack" HorizontalAlignment="Left" Height="419" Margin="0,166,0,0" VerticalAlignment="Top" Width="446"/>
</ScrollViewer>
I am using VS2013, and the System.Phone.Controls and System.Windows.Controls modules are included correctly.

Use a Grid and not a StackPanel. I forget the exact reason, but the StackPanel doesn't correctly report it size to the ScrollViewer container causing the ScrollViewer to not scroll correctly. Using a Grid will resolve this.

You shouldn't need to set "CanContentScroll". The ScrollViewer should display scroll bars if its child extends further than the ScrollViewer's bounds. Try:
Remove the fixed height of the child StackPanel. You don't want to restrict its height -- it should extend as far as its children, so that the ScrollViewer knows the correct scroll extent.
Make sure the ScrollViewer has a fixed or limited height -- ie, put it inside a fixed-size container like Grid, rather than an infinitely-extendable one like StackPanel. If it can extend infinitely, it will always be able to accommodate its child, and won't ever think it has to scroll.
Eg:
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="TextBoxStack"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="446"/>
</ScrollViewer>
</Grid>

Why is the image only partially visible inside my Button?

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.

TextBox stretch per content

Is it possible to make my textbox stretch via it's content ?
<TextBox Height="39" Width="180" HorizontalAlignment="Left" Name="ProductNametextBox" VerticalAlignment="Top" Text="{Binding Path=ProductName}"/>
Thanks

Try this
<TextBox Height="39" HorizontalAlignment="Left" Name="ProductNametextBox" VerticalAlignment="Top" Text="{Binding Path=ProductName}"/>

If you do not want to let the user edit the text, consider to use a TextBlock instead. If you do not specify a size for it, it will take just the space it needs - while the container might still decide to stretch it.

If you set the Width there will be no automatic sizing at all, if unset mostly the alignment matters. If you set the HorizontalAlignment to Stretch it will take up all available space in that direction, every other value will make the control size to content and place it at the respective position.

I'm using a WPF TextBlock but then text gets cut off when it's too long. Is there an AutoScroll feature?

My TextBlock has for example 50x50 pixels to display text, however if there is more text, I want a user to be able to scroll. Is there an autoscroll feature for this control?
Should I use a different control better suited for this task?
Here's a couple of pics to illustrate the problem:
This one works fine because the text fits in snugly:
This one doesn't seem correct. Text is cut off.

Just in case someone comes into the same problem. Just wrap the textBlock with a control. Works like a charm!
<ScrollViewer Background="Black">
<TextBlock x:Name="textBlockBackStory"
FontSize="12"
Foreground="Orange"
TextWrapping="Wrap"
Background="Black"
TextDecorations="None">
Backstory here.
</TextBlock>
</ScrollViewer>

You can put your textblock inside a ViewBox, so the font will adjust to display the entire text.

Aligning content in a WPF Viewbox

I have a Viewbox with Stretch=Uniform in order to not distort the content.
However, when the frame window is wider or taller than the content, the Viewbox content is always centered.
I cannot seem to find any content alignment options on the Viewbox.
Is there a way to do this?

Try VerticalAlignment="Top" and HorizontalAlignment="Left" on your viewbox. It will cause it to be anchored to the top and left side.
<Grid>
<Viewbox VerticalAlignment="Top" HorizontalAlignment="Left">
...
</Viewbox>
</Grid>
If you want it to completely fill (but keep it uniform) you can use Stretch="UniformToFill"

According to MSDN the Viewbox is used to stretch the child elements. Since the child elements would be stretched, you would have to set the content alignment of the children.
You may want to look at this for more information on the Viewbox: How do I keep aspect ratio on scalable, scrollable content in WPF?