I'm having a problem aligning the text in my listbox. I'm basically trying to create listbox that works like a uitableview in iOS.
In the code below the left TextBlock is set up just how I want it, but I can't get the right TextBlock to behave like I want it. Right now the text is right aligned so that when the text is too long to fit on the screen it cuts off the text at the beginning and just shows the end of the text. What I want to happen is have the TextBlock right aligned so that is stretches from the right but have the text inside of if left aligned so that it shows the beginning of the text and cuts off the end of the text.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxItemStretchContentStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<ListBox Height="327" Margin="8,274,0,0" Name="myListBox" Width="442" ItemContainerStyle="{StaticResource ListBoxItemStretchContentStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title Text" HorizontalAlignment="Left" Name="cellTitle" />
<TextBlock Grid.Column="1" Text="This is some text that is too long to fit on the screen" HorizontalAlignment="Right" TextAlignment="Left" Padding="20,0,0,0" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
TextTrimming might be of help here.
After setting the TextWrapping="NoWrap" could you try TextTrimming="WordEllipsis". Then try, modifying the TextAlignment.
Hope that helps.
If I understand correctly, you could set the maxwidth parameter of the textblock to keep it from overlapping?
MaxWidth=""
Related
I have something like this:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="2">
<Image Width="64" Height="64" Source="{Binding someIcon}"></Image>
<StackPanel Orientation="Vertical" Margin="15,1,0,1">
<TextBlock Text="{Binding someText}" FontSize="30" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text"/>
<TextBlock Text="{Binding someText2}"/>
</StackPanel>
</StackPanel>
</StackPanel>
<CheckBox
Content=""
Tag="{Binding someName}"
IsChecked="{Binding checked}"
Checked="someChecked"
Unchecked="someUnchecked"/>
</DataTemplate>
</ListBox.ItemTemplate>
in the ListBox.
I need to allign StackPanel to the left and CheckBox to the right. I need to take all possible screen width and place the CheckBox just at the right edge of the screen. The screen width can change, because it's an Universal Windows App.
How can I do it?
I've tried using RelativePanel and Grid, but without success. When I use Grid with 3 columns like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
I get the CheckBox just after the StackPanel, not at the end of the screen.
When I however use RelativePanel I get CheckBox in place of StackPanel, even though I use RelativePanel.AlignRightWithPanel="True" in CheckBox, RelativePanel.AlignLeftWithPanel="True" in StackPanel and HorizontalAlignment="Stretch" in RelativePanel.
Do you have any ideas?
Try this
When you do HorizontalContentAlignment to stretch items will take whole ListBox width
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
....
</ListBox>
I have a problem with scrolling in windows phone. I have a lot of elements on page so to add ability to scroll I put this on ScrollViewer. Hovewer, when I foucesd on some text block and the keyborad shows up, the scroll in working but it cuts the top and bottom of the page so it's can't be reach by user. Have you had similar problem with your apps and know how to fix this ?
I wil be really grateful for any help
Link to image when I put screenshot with my problem
The picture contains four screenshots:
1) The top of the page
2) The bottom of the page
3) Focus on the first textbox
4) The area on the page which can be reached when focus is set to the first TextBox
The last one picture present the are which can be rached when focus is set to the first textbox. As you can see I can't get to the textboxes below Field 7 when keybord is shown.
What I need is the ability to scroll and to reach all elements when the keybord is shown.
Do you know how to resolve my poblem
It's my xaml code:
<phone:PhoneApplicationPage
x:Class="PhoneApp6.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<ScrollViewer Grid.Row="1" Height="600" Margin="12 0">
<StackPanel>
<StackPanel>
<TextBlock Text="Name 1" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 2" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 3" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 4" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 5" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 6" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 7" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 8" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 9" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 10" />
<TextBox />
</StackPanel>
<Button>Submit</Button>
</StackPanel>
</ScrollViewer>
</Grid>
</phone:PhoneApplicationPage>
This is a known issue and is caused by the SIP changing the viewable area of the screen. The link David Gorden mentioned does help, but you actually need to change the height of the scrollviewer to achieve perfect results. To make things a little more complex WP does not trigger an event for when the SIP is visible! So you need to hook into the GotFocus/LostFocus events.
Edit your scrollviewer so it looks something like this:
<ScrollViewer x:Name="_scrollViewer"
VerticalAlignment="Top"
GotFocus="UIElement_OnGotFocus"
LostFocus="UIElement_OnLostFocus"
... bla bla
Now add the following in the codebehind:
private bool _isHdDevice;
private int _sipHeight;
private double _origHeight;
// Constructor
public MainPage()
{
InitializeComponent();
// todo - cater for landscape mode or sip scopenames that require extra space (predictive text and cut&paste icon)
var deviceWidth = this.ActualWidth;
_isHdDevice = (deviceWidth > 500);
_sipHeight = _isHdDevice ? 540 : 375;
_origHeight = _scrollViewer.Height;
}
private void UIElement_OnGotFocus(object sender, RoutedEventArgs e)
{
double height = this.ActualHeight - _sipHeight - TitlePanel.ActualHeight;
_scrollViewer.Height = height;
// the following lines are crucial otherwise a black band could appear above the SIP
App.Current.RootVisual.RenderTransform = new CompositeTransform();
this.UpdateLayout();
}
private void UIElement_OnLostFocus(object sender, RoutedEventArgs e)
{
_scrollViewer.Height = _origHeight;
}
This is basically resizing the scroll area when the sip (keyboard) is in view. You will need to add more code to cater for things like screen rotation, scopename associated to the textbox, and cut&paste icon if in view. But this will get you going and does the difficult bit.
Please mark as answered if it helped fix the issue.
If I understand this correctly, I was having a similar problem in my own app with an inability to scroll downward to the lowest texboxes while the keyboard is visible. Since I'm not all that clever, I solved it in the following way: a spacer that appears when the keyboard is up and disappears when it's not.
The textbox items for input in my scrollviewer are all in wrappanels, to keep things tidy. Below the last wrap panel, I added another, empty wrap panel, named "spacer" with a height of 120. It is set to visibility.collapsed by default.
As part of the gotfocus event handler for each of the textboxes in the wrap panel, I set spacer to visible. That allows for scrolling all the way to the last wrappanel/textboxes in my scroll viewer while the keyboard is up.
As a part of my lostfocus event handler for each of the textboxes, spacer's visibility is set back to "collapsed." That way, when there's no keyboard up, the scrollviewer doesn't have a big, funky, empty space at the bottom.
This may not be so elegant, but it's easy and works pretty well for me. I have not yet encountered any problems with it, though that doesn't mean there may not be something I've missed.
Not being at all familiar with XAML, I'm trying to get a very simple layout designed where the main page consists of two parts:
On the left, I want an image that will scale to fit the available height but maintain its aspect ratio.
On the right, I want a panel that will eventually contain text and controls - at the moment I just have text.
I can get the image to behave ok by using a ViewBox but I can't seem to get the right side of the screen to fill the remaining gap. See screenshot:
What I want is for the area that contains the text to stretch to the right with the text centred within it.
The relevant XAML code is:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<Viewbox HorizontalAlignment="Right">
<Image Source="Assets/ABCImage.png"></Image>
</Viewbox>
<StackPanel Orientation="Vertical">
<TextBlock Text="ABC Viewer"
TextAlignment="Center"
FontSize="48"></TextBlock>
<TextBlock Text="Test application"
TextAlignment="Center"
FontSize="24"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
This is taking me far too long to figure out. Can someone please put me out of my misery?
Try this :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0"
HorizontalAlignment="Right">
<Image Source="Assets/ABCImage.png"></Image>
</Viewbox>
<StackPanel Grid.Column="1">
<TextBlock Text="SEM Viewer"
TextAlignment="Center"
FontSize="48" />
<TextBlock Text="Test application"
TextAlignment="Center"
FontSize="24" />
</StackPanel>
</Grid>
i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :)
I tried multiple approaches but nothing worked. My code is following
<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
<ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width=">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.)
When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef".
Any idea how to align one text block to the right and the other one to the left?
many thanks :)
By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
However, I would recommend using a Grid and defining two columns
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
I am playing around with silverlight - specifically Silverlight for windows phone. I would like to have a textblock inside a border element. I want the textblock to fill up the entire border element. I would also like the text inside the textblock to the centered within the textblock - both vertical and horizontal.
The problem that I am encountering is that if I set the horizontal and vertical alignment of the textblock to center, then the textblock resizes to the size of the text, hence the textblock does not fill up all the available room inside the border. If I set the horizontal and vertical alignment properties of textblock to stretch, I get the textblock to expand to fill up the border, but the textblock text is not centered anymore. I think I can use padding to center the text, but this does not give a precise result as the length of the text can vary.
The reason why I would like to have the textblock within a border in the first place is because Silverlight for Windows Phone does not provide a background property for textblock. I use the border to provide a background color.
In short, is there any way to center the text in a textblock, when the textblock is inside a border element and the textblock must stretch to fill the border.
Below is the code that I have so far.
<Border BorderBrush="Red" BorderThickness="2" Grid.Row="0" Grid.Column="0">
<TextBlock Name="textBlockA1" Text="Center Me!" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Border>
You don't need to center or stretch anything. I assume you will eventually put this Border to a Grid, so just set the Grid's column and row to auto and the Border will resize itself based on the size of the TextBlock.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock x:Name="textBlockA1" Text="Center Me!"/>
</Border>
</Grid>
UPDATE
I don't understand why someone would downvoted this. This is definitely a good way to add a Background color to a TextBlock. It's like you are filling the Grid's cells with the Border's background color. See below example.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12" />
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#FFBC7C0A">
<TextBlock x:Name="textBlockA1" Text="Center Me!" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.Row="2">
<TextBlock x:Name="textBlockA2" Text="Center Me!" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.Row="2" Grid.Column="2">
<TextBlock x:Name="textBlockA3" Text="This is a longer text" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.Column="3">
<TextBlock x:Name="textBlockA4" Text="Short" Foreground="White" Height="27" VerticalAlignment="Top" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.ColumnSpan="3" Grid.Row="4" HorizontalAlignment="Left">
<TextBlock x:Name="textBlockA5" Text="Center Me!" Foreground="White" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
</Grid>
Also, if you want a left or right margin on the TextBlock you can either apply a style to the TextBlock (e.g. PhoneTextNormalStyle) or give a padding to the Border.
If center alignment does not do it for you and you want to stretch the text to use up more space you can either use the FontSize property and choose a bigger font or use a ViewBox:
<Border
BorderBrush="Red"
BorderThickness="2"
Grid.Row="0"
Grid.Column="0">
<Viewbox>
<TextBlock
Name="textBlockA1"
Text="Center Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Viewbox>
</Border>