visual studio designer blend textblock width issue - xaml

I have a project in visual studio blend designer...where there is a text box in the xaml view that has code like this:
<TextBlock x:Name="something" Margin="0,0,0,0"
TextWrapping="NoWrap" Text="{some.variable.is.here, Mode=OneWay}"
d:LayoutOverrides="Width, Height" Grid.Row="1" Grid.ColumnSpan="2"
FontFamily="/Skins/Fonts/#Lucida Sans" FontSize="17" Foreground="#FF95A9BF"/>
For some reason this code just cuts off the string at a certain width, seems to be capped at 400. If I try to add the width parameter to it like this:
<TextBlock x:Name="something" Margin="0,0,0,0"
TextWrapping="NoWrap" Text="{some.variable.is.here, Mode=OneWay}"
d:LayoutOverrides="Width, Height" Grid.Row="1" Grid.ColumnSpan="2"
FontFamily="/Skins/Fonts/#Lucida Sans" FontSize="17"
Foreground="#FF95A9BF" **Width="800"**/>
it doesn't change anything.
How do I get this textbox to be a set width like 800?

Firstly, ditch all that WYSWYG IDE garbage it adds on there. Your d:LayoutOverrides is your culprit. Then just set the property. So that mess you have becomes;
<TextBlock x:Name="something"
Grid.Row="1" Grid.ColumnSpan="2"
Text="{some.variable.is.here}"
FontFamily="/Skins/Fonts/#Lucida Sans" FontSize="17"
Foreground="#FF95A9BF" Width="800"/>
Blend is super handy and awesome, don't get me wrong there. However you'll want to learn some XAML too. Hope this helps, cheers!

Related

Is it possible to create a TextBlock style with border - or do I have to create a UserControl?

At the moment, I keep repeating the XAML below used in titles what I want to improve.
<Border Grid.Row="1" Grid.Column="1" Background="{StaticResource Brush.Black24}" CornerRadius="4">
<TextBlock Margin="8" FontFamily="Segoe UI Semibold" FontSize="14" Foreground="White" VerticalAlignment="Center" Text="BUILT IN MODULES"/>
</Border>
Apparently TextBlocks have no template. I think creating a UserControl is a bit excessive. In addition, I would have to deal with Attached Properties. Any ideas?

How do I create a two column layout using xaml RelativePanel?

I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.
This is what I want
I've tried to achieve this with the following XAML:
<RelativePanel>
<TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
</TextBlock>
<TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.RightOf="FileList">
</TextBox>
<ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="Title">
</ListView>
</RelativePanel>
This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.
Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case
Your Editor control should have -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"
Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.

Doesnt show the full article

I have some long article to show in an view. So I made a TextBlock and bound Text with Content property.
Xaml:
<Grid Margin="12,24,12,0"
Background="White">
<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"
Foreground="Black"
Text="{Binding Column.Title}"
TextWrapping="Wrap"
Margin="0,0,0,12"
VerticalAlignment="Top" />
<ScrollViewer Margin="0,62,0,10">
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="{Binding Column.Content}"
TextWrapping="Wrap" />
</ScrollViewer>
</Grid>
The last paragrafs of the article:
The problem is that it doesn’t show the last paragraphs O_o:
What is the problem and how can I fix it?
The reason for this behavior is that any element that must be displayed beyond the area which is larger than 2048x2048 pixels would be clipped by the platform.
Maybe this article can help you : Creating Scrollable TextBlock for WP7.

Border Control in Windows Phone 7, Auto Height & Width not right

I have a ListBox with this template in it.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<StackPanel Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000" Width="460" MinHeight="76">
<StackPanel Margin="4,4,-4,-153">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
<TextBlock " Text="{Binding Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Yet I have to force set a Width and Height on the Border otherwise it makes like Width and Height of "2".
It is like it does not understand I have 2 TextBlock inside it and won't expand to fill both of them.
This leaves me with having to put a fixed height and width in what I don't like as if the text is too big it gets cutoff.
You can toss out your StackPanel's because you don't need them, they're also what's keeping your wrapping from working, you need a panel like a Grid for that. The negative Margin's also isn't something you'd normally see in a DataTemplate for a ListBox so I'd guess you have some other funky layout stuff going on from that sort of practice elsewhere up the tree.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<Grid Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000"/>
<TextBlock TextWrapping="Wrap"
HorizontalAlignment="Center" Margin="4,4,-4,-153">
<Run Text="{Binding }"/><LineBreak/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
So unless I'm missing something somewhere this should fix you up as the Grid will handle the sizes of its children for you and consume the space necessary in its parent. However if there's something else in your structure pushing stuff around and won't let it consume that space it should invoke your Wrapping.
Hope this helps :)

Windows 8 Metro XAML. How to change background of grid on hover and/or click

I would like to change the background of my grid to white when you hover over or select it. I'd also like to change the color of the text inside at the same time to black. This is specific to one page only, so it would need to be applied with an XKey or something as a guess. The grid starts with a transparent background, also.
I'm really struggling to find the direction for this. Please let me know if you have any ideas or links!
Here's my code:
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="335" Height="152">
<StackPanel Orientation="Horizontal" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Margin="13,0,13,0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Town}" />
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding State}"/>
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Postcode}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
Thanks for any help.
It seems like you would probably want to modify your GridView's ItemContainerStyle and change its background and visual states to match your requirements. Check my answer to an earlier question related to restyling items here to learn how to extract and modify these styles and templates.