I'm writing a WP7 app and on a certain page I have a TextBlock with textwrapping. This TextBlock gets its text through binding. I placed a ScrollViewer around the TextBlock for when there are too many lines of text. Here's an example:
<ScrollViewer Margin="0,128,0,0" Name="Scroller">
<TextBlock x:Name="ItemContent" TextWrapping="Wrap" Text="{Binding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ScrollViewer>
Now when I scroll to the end of the text, I still can scroll down half a page or more. I have trimmed my text both sides, so that's not the problem either. Is there a way to fix this?
Thanks!
There is limitation on all UIElements that they can't be more than 2048px in either dimension. This is to avoid excessive memory use when creating much more UI than can fit on the screen at once.
I'd advice splitting the text over multiple TextBlocks.
One alternative is to embed the text in a WebBrowser control but this can provide a substandard user experience.
For an example on alternative method see http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx
Related
I am trying to set up an element within a WPF application, but cannot get the TextTrimming on the TextBlocks to work properly. This is within a ScrollViewer. I am currently using a DockPanel as the inner container.
I have searched quite a bit, but found no questions addressing this issue.
The XAML for the container:
<Grid>
<ScrollViewer>
<DockPanel Name="listedCharacters" LastChildFill="False"></DockPanel>
</ScrollViewer>
</Grid>
The XAML for the child elements (added by code):
<UserControl …>
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding FullName}" TextTrimming="CharacterEllipsis" />
</Grid>
</UserControl>
The first problem is that whether I use the DockPanel or a StackPanel, as the inner container, the child element's width appears to be dictated by its content (the TextBlocks) rather than constrained by the parent ScrollViewer.
The effect I want is for the ellipsis to truncate each TextBlock's content when the Window's grid column (not shown in code) is narrower than the bound text. Basically, a list that scrolls vertically when needed, and trims horizontally (which I thought would have been sufficiently common that the answer would be out there; alas, no).
I believe I need to use my own UserControl for this, as there is a lot more going on than shown her; right-click menus on the item in the list, etc.
The secondary issue, iff the optimal panel to use is the DockPanel, how to apply the DockPanel.Dock="Top" through code (C#) when the elements are dynamically added? Again, I cannot find anything that appears to explain this. (I know it is probably in the wrong place in the sample code above.)
I am starting to learn SL...
I am trying to make a MediaElement of size X, and on the bottom of the movie frame some subtitles that will run.
I was unable to understand if I need absolute position or something else.
Please advice
thanks
If you need to us it as a subtitle you just need to put your TextBlock under the MediaElement on your Grid and need to give VerticalAllignment property as bottom on XAML. And it will be over it. Like this;
<Grid>
<MediaElement/>
<TextBlock VerticalAllignment="Bottom"/>
</Grid>
You may refer Grid Layout as relative positioning if you're new to silverlight. And can give a margin to your textblock or anything you want just take a look at the intellisense (if using VS) and you'll understand, if you're using expression blend it'll be a lot easier with UI.
If you want to use absolute positioning you'll need to use Canvas instead of Grid Layout, its the same and you can change anything to canvas with nearly no problem. In canvas, you need to use left and right properties instead of allignments. Like this;
<Canvas>
<MediaElement/>
<TextBlock Canvas.Left="0" Canvas.Top="400"/>
</Canvas>
Another option is stackpanel its not really suitable for LayoutRoot, but its pretty nice for controls. So if you want your subtitles to stay under your movie you should use StackPanel like this;
<StackPanel Orientation="Vertical">
<MediaElement/>
<TextBlock/>
</StackPanel>
So to sum up;
-If you want your subtitles to be on top of your movie use grid like the first example,
-If you have a fixed size and you want to place your subtitles anywhere you want use Canvas,
-And if you want to put your subtitles under your movie use StackPanel.
-My personal choice would be grid. =)
For more information you may check this article it seems like a nice one!
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx
Happy coding!!
The TextBlock will overlay (within a Grid layout) the MediaElement simply because it is declared after the MediaElement. VerticalAlignment="Bottom" will place it at the bottom of the Grid. You might want to set the Grid's width and height (instead of the MediaElement) that of the size of the video. The MediaElement will auto size to stretch the full size of the grid.
<Grid x:Name="LayoutRoot" Width="480" Height="320">
<MediaElement/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom"/>
</Grid>
Normally the silverlight controls know where they are in terms of who is in front of or behind. An example is putting an image inside a listbox and when you scroll up and down in the listbox, the image will disappear/hide inside the listbox boundaries.
I have put a bing map object(the one that comes with the windows phone 7 sdk) inside a listbox. When I scroll to where the map is in the listbox, it is acting like I have some flag set to "Always on Top". I can't seem to find a property that is setting this or if it's inherent in the way the maps are designed.
I haven't tried this yet, but I'm curious if I add layers with pushpins in them if they too would act "Always on Top". I've included an image to explain. As you can see below, the map is outside of the listbox's bounding area and is even overlapping a button outside of the listbox.
Link to Map Image
<ListBox Height="590">
<TextBlock IsHitTestVisible="False" Foreground="#F80046" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center" Text="Map"></TextBlock>
<my:Map Width="445" x:Name="EventMap" Margin="0,0,0,20" LogoVisibility="Collapsed" CopyrightVisibility="Collapsed">
<my:Map.CredentialsProvider>
<my:ApplicationIdCredentialsProvider ApplicationId="OMITED"></my:ApplicationIdCredentialsProvider>
</my:Map.CredentialsProvider>
</my:Map>
</ListBox>
I'm not sure what you're trying to accomplish, but this seems like more of a usage of ScrollViewer
<ScrollViewer>
<StackPanel>
<my:Map>
</StackPanel>
</ScrollViewer>
rather than ListBox. But anyway, I couldn't reproduce the problem. Does that button have some custom margins that could be doing that?
Here's the solution file I created to see the problem you have in the image. Note that I wasn't able to reproduce it in the solution.
http://dl.dropbox.com/u/129101/WindowsPhoneApplication1.zip
In Windows Forms the default behaviour of a TabControl is to have the tabs spill out to a scrollable area if they consume too much space (MultiLine = false).
What is the best approach to achieving this behavior in WPF?
UPDATE
I was trying to find a solution using TabControl.ItemsPanel but it seems anything I put in there gets completely ignored, so for this reason I've gone the hard way and started with TabControl.Template which is mind boggling that we have to do it this way if it turns out to be the correct approach.
Extremely far from being complete, my starting solution to the problem is as follows.
<TabControl>
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel>
<ScrollViewer DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ScrollViewer>
<ContentPresenter ContentSource="SelectedContent" />
</DockPanel>
</ControlTemplate>
</TabControl.Template>
<TabItem Header="One">First</TabItem>
<TabItem Header="Two">Second</TabItem>
<TabItem Header="Three">Third</TabItem>
<TabItem Header="Four">Fourth</TabItem>
<TabItem Header="Five">Fifth</TabItem>
</TabControl>
In working to make a TabControl where the tabs are stacked vertically along the left, I found this solution for you:
http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx
Pretty impressive stuff!
Your solution to replace the template seems to be the best way to do this. The default panel for the TabItems is a TabPanel, and I don't see anything like a "should wrap" property on it.
The documentation contains an example of replacing the TabControl template with a different TabPanel:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.tabpanel.aspx
i had the same problem few years ago, my solution was to limit the size of the header, and the panel that contains it, of course you need to make your own template like what you started, and also i need to implement some scrolling support so i put two repeat buttons at the left and right side of the scroll viewer.
my inspiration was a nice project from code project called IE tabs in wpf.
it's old as wpf and works good
I know this is an older post, but I wanted to add another idea should others be searching this on the internet.
If you set the width of the tabpanel to something larger it will be (assuming this is not a tabpanel that allows the user to continue to add other tabs in it). If you have the user adding new tabs to the tab panel, then a scroll bar will need to be added.
the easiest option is to set the ItemsPanelTemplate on the TabControl. I think the default is WrapPanel, hence the Multiline behaviour.
Change it to StackPanel for example and maybe add a ScrollViewer.
Something like this (just coding this without VS)
<TabControl>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
</TabControl>
hope that helps a bit...
So I'm coming at WPF from a HTML perspective.
I just want to put a TextBox on my Window like this:
<Grid>
<TextBox Name="theName" />
</Grid>
Turns out that the TextBox is then HUGE, covers the whole window. (!)
Ok, that's not what I want, but I don't want to define the EXACT size either since I know Height and Width should be flexible, so I try:
<TextBox Name="theName" Width="Auto" Height="Auto"/>
Same thing. So I try:
<TextBox Name="theName"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
Same thing. So I just hard code the sizes:
<TextBox Name="theName" Width="100" Height="20"/>
Which I know is not a good programming practice in WPF.
So, what how do you tell TextBox to "display default sizes for the font size being used"?
You can take Bryan's example even a bit further. By specifying a specific alignment that isn't stretch and further constrain the TextBox so that it won't expand beyond a certain size. eg:
<Grid x:Name="LayoutRoot">
<TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap"
MinWidth="15" MinHeight="20" MaxWidth="500" MaxHeight="50"/>
</Grid>
You can take it even further by setting up rows/columns inside the Grid and constraining them in various fashions. As you're coming from an HTML background, think of it like using a table to control layout. Remember that you can also nest other container objects (i.e. StackPanels, WrapPanels, other Grids, etc...).
The challenge with XAML and the WPF/Silverlight controls is that they a very flexible, so you've got to get a handle on all the options and how they affect layout.
Good luck. I'm going through this exact same thing now.
Use a different container.
The Grid always streches its child controls to fill the grid cell.
You could use e.g. a stackpanel which only streches its controls in one direction.
In addition to using a different panel as Stefan mentioned you could just give the TextBox an alignment that isn't Stretch. e.g.
<TextBox Name="theName" HorizontalAlignment="Left" VerticalAlignment="Top"/>
The sizes in WPF aren't pixels, they are "device independent pixels" that are 1/96 of an inch - so in today's normal DPI setup they map 1:1 to pixels.
But, if you run the program in high DPI mode the TextBox will grow with the DPI (and the font).
So setting an hard-coded size isn't that bad.
Other than that you can only use HorizontalAlignment and VerticalAlignment that are not "Stretch", this will size the TextBox to content - but then an empty TextBox will be tiny.
You can set VerticalAlignment to "Center", "Top" or "Bottom" to get automatic height of about one line (maybe backed up by a MinHeight setting to avoid problems really tiny fonts) and then set the Width so the TextBox width does not change as the user types into it.