Is there a limit to the amount of data/text that can be stored in a TextBlock/ScrollViewer?
I currently have this:
<ScrollViewer Height="Auto" Margin="0,151,0,0">
<TextBlock x:Name="auditText" Text="TextBlock"
VerticalAlignment="Top" Foreground="White" Height="Auto" Margin="0,10,0,0" Grid.Row="1" Padding="20" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>
It appears to work but as I get further down the scroll I find this:
As you can see there is more text but it just stops....any ideas?
The reason for this issue is that any element that must be displayed beyond the area which is larger than 2048x2048 pixels would be clipped by the platform.
You need to divide up your text into segments blocks and display.
TextBlock is Cutting Text in Windows Phone
Related
For an application written in C# using WPF I have the following issue:
I have a textbox with text that is being pulled from a database. The length and format of the text can vary from being a short remark, to a long text of multiple paragraphs. In some edge cases, we get text which consists of many short lines 1. Because space is limited vertically and horizontally, we need to define the dimensions of the textboxes to fit the UI 1. As you can see, in the case where the textbox has to display more than 5 lines, with the lines being very short, we get a situation where the scrollbar doesn't align with the right side of the textbox, but aligns with the text itself.
I have tried to put the textbox inside of a Scrollviewer and tried to fix the issue this way, but this resulted in the scrollbar being outside of the textbox, with the thumb of the scrollbar not showing and the dimensions of the scrollbar itself being completely off.
The final result should be a scrollbar that is always aligned to the right side of the textbox, no matter the length of the text that is being displayed.
Examples of textboxes, top one being an edge case which comes up sometimes
<Label Grid.Row="0"
Content="{StaticResource NominationInfo_OperatorRemarks}"
Style="{StaticResource UnderlineLabel}" />
<TextBox Width="500"
Grid.Row="1"
HorizontalAlignment="Left"
MaxLines="5"
IsReadOnly="True"
Text="{Binding OperatorRemarks, Mode=OneWay}"
TextWrapping="Wrap"
ScrollViewer.VerticalScrollBarVisibility="Auto">
</TextBox>
<Label Grid.Row="2"
Content="{StaticResource NominationInfo_LoadingInstructions}"
Style="{StaticResource UnderlineLabel}" />
<TextBox Grid.Row="3"
MaxLines="5"
IsReadOnly="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Text="{Binding OperatorInstructions, Mode=OneWay}"
TextWrapping="Wrap"
Width="500"
HorizontalAlignment="Left" />
I suppose you have confounded HorizontalAlignment and HorizontalContentAlignment.
Putting the following code to the TextBox should do the trick.
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
I am currently developing a map application with a floating time selector in the bottom of the application:
so far, so good. The time selector on the bottom is implemented the following way:
<DockPanel Grid.ZIndex ="2" Height="Auto" HorizontalAlignment ="Stretch" VerticalAlignment="Stretch">
<StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal" Margin="0,0,0,20">
<!-- Play/Pause button for map time -->
<Button x:Name="MapTime_PlayPause_Button" VerticalAlignment="Center" Height ="30" Width ="30" Margin="0,0,20,0" ScrollViewer.CanContentScroll="True" BorderBrush="{x:Null}" Foreground="{x:Null}" >
<Button.Background>
<ImageBrush ImageSource="/play_Button_40x40.png"/>
</Button.Background>
</Button>
<!-- Map Time Slider -->
<Slider x:Name="MapTime_Slider" VerticalAlignment="Center" HorizontalAlignment="Center" Width ="200" SmallChange="1" Minimum="-55" Maximum="0" Value="-55" TickPlacement="BottomRight" ValueChanged="MapTime_Slider_ValueChanged" />
<!-- Map Time Display -->
<Label x:Name="MapTime_Label" Height="40" Foreground="#FF5AE00D" Background="#FF303030" Margin="10,0,0,0" Content="-55" FontSize="22" VerticalAlignment="Center"/>
</StackPanel>
</DockPanel>
The issue is the following: The whole stack panel is centered on the screen - fine.
As soon as I use the slider, the issue appears. The slider updates the MapTime_Label to the right of it. Due to the number increasing or decreasing, the width of the label changes.
Therefore the alignment of the whole stack panel changes and the slider becomes totally unpredictable:
Notice how the Play button at the start of the gif is to the right of the lake. As soon as I use the slider and the number changes, it jumps over to the left of the lake.
In the end, I will have integer rather than float. The above example is exaggerating the issue. With integer I have the issue still when transitioning between digit lengths such as -100 (4 chars) to -99 (3 chars) or -1 (2chars) to 0 (1 char)
Any idea on how to have the slider at the center of the screen whilst letting the button and label wrap around as is?
I have a custom WPF control based on Soroosh Davaee’s ImageButton example at http://www.codeproject.com/Tips/773386/WPF-ImageButton. The custom control combines an Image and TextBlock in a horizontal StackPanel within a Button. (BTW, to get Soroosh’s example to run, I had to edit the solution properties so that “SampleView” is the startup project rather than “ExtendedButton” being the startup project.)
I want the text in the TextBlock to automatically shrink if necessary to avoid clipping at the right edge if the text is too long to fit naturally in the button. For example, if I edit Soroosh's MainWindow.xaml to make the button text too long to fit...
...
<EB:ImageButton Width="100" Height="30" Content="TextTooLongToFitInTheButton" Grid.Row="2"
...
<EB:ImageButton Width="100" Height="30" Content="TextTooLongToFitInTheButton" Grid.Row="2"
...
...the result is the following buttons with clipped text:
In researching this, it seems the simplest way to auto-shrink the content of a TextBlock is to wrap it within a Viewbox:
<Viewbox StretchDirection="DownOnly" Stretch="Fill">
<TextBlock ... />
</Viewbox>
DownOnly apparently prevents the Viewbox from enlarging the text to fill the space, and Fill (as opposed to Uniform) seems to tell it to stretch (shrink) only the dimension that needs to shrink (i.e. the horizontal dimension in my case).
In Soroosh's example Generic.xaml file, I wrapped the TextBlock in such a Viewbox:
<Button >
<StackPanel Orientation="Horizontal">
<Image Margin="2 0"
Source="{TemplateBinding Image}"
Width="{TemplateBinding ImageWidth}"
Height="{TemplateBinding ImageHeight}"
Visibility="{TemplateBinding Image,Converter={StaticResource VisibilityConvertor}}"
VerticalAlignment="Center"/>
I added--> <Viewbox StretchDirection="DownOnly" Stretch="Fill">
<TextBlock Text="{TemplateBinding Content}"
VerticalAlignment="Center"/>
I added--> </Viewbox>
</StackPanel>
</Button>
This produced exactly the same clipped button text. Just experimenting, I tried forcing the Viewbox to have a fixed width...
<Viewbox StretchDirection="DownOnly" Stretch="Fill" Width="60">
...which produced this:
...which shows the capability of the Viewbox, if only it could somehow know its available width when it's inside the StackPanel.
I did note that if I wrap the Viewbox around the whole StackPanel, it successfully auto-shrinks the entire content of the StackPanel:
<Button >
<Viewbox StretchDirection="DownOnly" Stretch="Fill" Width="60">
<StackPanel Orientation="Horizontal">
<Image Margin="2 0"
Source="{TemplateBinding Image}"
Width="{TemplateBinding ImageWidth}"
Height="{TemplateBinding ImageHeight}"
Visibility="{TemplateBinding Image,Converter={StaticResource VisibilityConvertor}}"
VerticalAlignment="Center"/>
<TextBlock Text="{TemplateBinding Content}"
VerticalAlignment="Center"/>
</StackPanel>
</Viewbox>
</Button>
...which produces very nearly what I want:
...but both the image and text are shrunk, and I want only the text shrunk.
How can I make the Viewbox, wrapping only the TextBox, know its available width (and height, I suppose) from within a cell of the StackPanel?
This is a common problem. The solution is simply to not use a StackPanel to do any kind of layout that requires re-sizing of child controls. It's simply not the correct Panel for the job. Instead, try using a Grid panel, which will resize its child controls. The StackPanel control is really only good for the most basic of layout duties... try anything more adventurous and you'll find yourself getting these issues.
One other alternative is to use the TextBlock.TextTrimming Property to trim the text instead... you could put the full text into a ToolTip too.
I have the following setup
<grid>
<StackPanel>
<ListBox>
<TextBlock> ->Text you see getting cutt off<-
I have tried both just doing listbox.Add(String) and dynamically creating a TextBlock, assigning it text and then adding it to the listbox. Both produce identical results.
The image shows the listbox scrolled down half wayish. It appears the listbox has the correct height but the text inside hits some kind of limit.
UPDATE I changed the listbox to a scroll viewer and also hardcoded the Textblock in. Still same exact results
<Grid x:Name="theGrid" Grid.Row="1" Margin="12,0,10,0">
<StackPanel x:Name="TitlePanel" Grid.Row="0">
<TextBlock Text="Networking Tools" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<StackPanel x:Name="stack">
<TextBlock x:Name="inputIndicator" Margin="12,0,0,0">
<Run Text="Enter IP OR Domain"/>
</TextBlock>
<telerikPrimitives:RadTextBox x:Name="input" Text="google.com" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="1" Height="84" Width="458"/>
<telerikInput:RadListPicker SelectionChanged="picker_SelectionChanged" x:Name="picker" HorizontalAlignment="Left" VerticalAlignment="Top" Width="436"/>
<Button Click="Button_Click" Content="Go" HorizontalAlignment="Left" VerticalAlignment="Top" Width="456"/>
<ScrollViewer HorizontalAlignment="Left" Height="392" Width="Auto" x:Name="list" VerticalAlignment="Top">
<TextBlock Name="content" Height="Auto" Width="Auto"/>
</ScrollViewer>
</StackPanel>
<UI:AdControl ApplicationId="test_client" AdUnitId="Image480_80" Height="80" Width="480"/>
</StackPanel>
<telerikPrimitives:RadBusyIndicator Margin="0,0,0,0" Height="106" Width="116" AnimationStyle="AnimationStyle1" x:Name="busyIndi" />
</Grid>
UI elements in Windows Phone 7 have a maximum renderable height and width of 2048 pixels. Any content that is larger than that gets clipped. The limit is only slightly higher for Windows Phone 8.
You did not mention how much text you are trying to show, but if it is very long, you could be hitting that limit.
There are a few ways you could handle this:
1) Break the text into smaller chunks and add individual TextBlocks to your StackPanel for each chunk.
2) Create a custom control that does the above for you, like this one: http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx
3) Use a WebBrowser control instead of a TextBlock, and use its NavigateToString method to put your text in there.
I am attempting to create a slider control which will determine the scaletransform of a videobrush in my MainPage, and was wondering if it was possible to somehow place this slider on top of the videobrush (which I would like to be full screen)? Currently I am using a grid for my layout where a videobrush takes up the whole screen except for two buttons on the bottom of the screen, but I would like to possibly use a canvas and place this slider in a way that would account for the current and future screen sizes of a Windows Phone device. I am unsure of how to exactly accomplish this without setting constant dimensions for the slider. For instance the slider may be placed horizontally near the bottom of the screen in Portrait mode and would have a 50 pixel space between the left and right sides. Could someone assist with how this could be done?
EDIT
Placing a single child element over the videobrush works, although I would like to place more than one slider which gives an error. I also wanted to add information above and below each slider so I chose a stackpanel to do this (yet only one stackpanel as a child element is allowed?).
<Border x:Name="videoRectangle" Grid.Row="0" Grid.ColumnSpan="2" >
<Border.Background>
<VideoBrush x:Name="viewfinderBrush">
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="viewfinderBrushTransform" CenterX=".5" CenterY=".5" Rotation="90" />
</VideoBrush.RelativeTransform>
</VideoBrush>
</Border.Background>
<!--<StackPanel VerticalAlignment="Top">
<TextBlock x:Name="resolutionValueTextBlock" HorizontalAlignment="Center" Text="{Binding Value, ElementName=resolutionSlider}"/>
<Slider x:Name="resolutionSlider" HorizontalAlignment="Stretch" Margin="50,5,50,5"/>
<TextBlock x:Name="resolutionTextBlock" HorizontalAlignment="Center" Text="resolution"/>
</StackPanel>-->
<StackPanel VerticalAlignment="Bottom">
<TextBlock x:Name="zoomNumberTextBlock" HorizontalAlignment="Center" Text="{Binding Value, ElementName=zoomSlider}"/>
<Slider x:Name="zoomSlider" HorizontalAlignment="Stretch" Margin="50,5,50,5"/>
<TextBlock x:Name="zoomTextBlock" HorizontalAlignment="Center" Text="zoom"/>
</StackPanel>
</Border>
If possible I would like both stackpanels to be available, but if not I guess I would have to use the bottom one only.
Stay with the Grid:
<Grid>
<Rectangle>
<Rectangle.Fill>
<VideoBrush ... />
</Rectangle.Fill>
</Rectangle>
<Slider HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Margin="50,5,50,5"/>
</Grid>