I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
Related
I am trying to create this in WPF (I realize I could just use an image, but I am trying to learn WPF):
(source)
This is what I have so far but it isn't producing the desired result, in that, the textbox seems completely hide the ellipse whereas it should simply have a transparent background:
<StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="144,207,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<Ellipse HorizontalAlignment="Left" Height="52" Margin="142,189,0,0" Stroke="Black" VerticalAlignment="Top" Width="52"/>
</StackPanel>
You can put things like this in a viewbox to make scaling easier, something like this. You'll need to remove the stack panel, it's going to stack items one on top of the other which isn't what you're after here. I used a grid in this case.
<Viewbox Width="100" Height="100">
<Grid Width="20" Height="20">
<Ellipse Stroke="Black"/>
<TextBlock HorizontalAlignment="Center" Text="i" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Viewbox>
Or you can use the unicode character: ⓘ
code 0x24D8
<TextBlock Text="ⓘ" FontSize="52" />
So a stackpanel will place the first item at the top, the second just below it, third below the second, and so forth. What you could do is use a Canvas or a Grid. Like the stackpanel, they are "Content Controls" and support placing multiple objects inside of them like you have done with the stackpanel.
So a really quick way to do what you're trying to accomplish would be:
<Grid >
<Ellipse HorizontalAlignment="Left" Height="52" Stroke="Black" VerticalAlignment="Top" Width="52"/>
<TextBlock Text="i" FontSize="52" Margin="18,-13,-6,13" />
</Grid>
You can do it using a border and a TextBlock. A square border will become a circle if you make its CornerRadius equals half its Width (or Height):
<Border Width="100" Height="100" CornerRadius="50" BorderBrush="Black" BorderThickness="2">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="50" Foreground="Blue" >i</TextBlock>
</Border>
Don't use a StackPanel for this, the purpose of it is to stack things, not show them overlapped, you're using the wrong tool for that. Use a Grid, it's far more suited for what you're trying to do.
To have a transparent background, you have to either set the TextBlock's Background property to Transparent, or set a null background.
Background={x:Null}
I am trying to create buttons for a 10-foot GUI using WPF. Each button requires a little more data than just a single text string and an image, maybe 2-3 strings located in different positions and some imagery.
I have tried
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<TextBlock Name="textBloczk2" Text="ABC" TextAlignment="Left" DockPanel.Dock="Left"/>
<TextBlock Name="textBlxock1" Text="CDE" TextAlignment="Right" DockPanel.Dock="Right"/>
</DockPanel>
</Button.Content>
</Button>
But no matter which inner container I use, the button seems to disregard the layout from the DockPanel and the combined text ends up in the middle of the button. Am I doing something wrong or should I be using a different outer container ?
The problem seems to be that the DockPanel's width is so small that the Right and Left panels are the same width as your TextBlocks.
This seems to work as expected (setting the width of the DockPanel):
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" Width="300">
<TextBlock Name="textBloczk1" Text="Left" DockPanel.Dock="Left" />
<TextBlock Name="textBlxock2" Text="Right" DockPanel.Dock="Right" />
<TextBlock Name="textBlxock3" Text="Top" DockPanel.Dock="Top" />
<TextBlock Name="textBlxock4" Text="Bottom" DockPanel.Dock="Bottom" />
</DockPanel>
</Button.Content>
</Button>
Try to add "HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" to your button. This way dockpanel will occupy all space inside the button.
I have a little problem using the longlistselector (well more specifically the multilonglistselector) in windows phone 8.
I use binding to bind the name of an object to the items, the XAML code is as follow:
<Grid>
<TextBox x:Name="searchBox"
IsEnabled="{Binding IsConnected}"
HorizontalAlignment="Left" KeyUp="CheckKey"
Height="72" Margin="10,10,0,0" TextWrapping="Wrap" InputScope="Search" GotFocus="Select"/>
<toolkit:LongListMultiSelector EnforceIsSelectionEnabled="True" SelectionChanged="AdjustAddSelectionButton" x:Name="resultList" ItemsSource="{Binding Results}" HorizontalAlignment="Stretch" Height="434" Margin="10,87,0,0" VerticalAlignment="Top" >
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Title}" TextWrapping="Wrap">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DoubleTap="OpenArticleDetail" />
</toolkit:GestureService.GestureListener>
</TextBlock>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
The Binding takes place perfectly, but the text is sometimes too long and doesn't fit the screen. How would I go about wrapping this text to another line?, I 'll give a screenshot here
You didn't really state any specific problem or question you want answered. Please try to be a bit more clear in the future.
If you don't like that the TextBlock cuts off words that it can't fit, then you have several solutions.
TextBlocks have a TextWrapping property, so doing TextWrapping="Wrap" will enable the TextBlock to resize itself to display all the content.
TextBlocks have the TextTrimming property, so writing TextTrimming="WordEllipsis" will replace any cut off words with an ellipsis.
If you want to keep the one line but also show all the content, you can put the TextBlock inside a Horizontal ScrollViewer, which will let the user scroll the text left and right. Not great, but a decent solution
Code for 3.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock Text="Text"/>
</ScrollViewer>
I added a huge right padding to my main TextBlock to work around this issue.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="MyTemplate">
<StackPanel VerticalAlignment="Top" Margin="0,-4,-50,0">
<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding title}" TextWrapping="Wrap" Margin="0,0,0,6"/>
<TextBlock Text="{Binding text}" TextWrapping="Wrap" FontSize="30" Padding="0,0,125,0"/>
<Rectangle HorizontalAlignment="Stretch" Height="1" Fill="#78c5a6" Margin="0,18,0,18"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
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 have some Canvases in a ListBox. Inside these Canvases I have some TextBlocks which have their text bound to them. However when I try to use a MaxWidth/Height property on the text block (or the standard Height/Width), the properties are ignored! So I end up with the text overspilling the Canvas in cases.
I would much appreciate any help on the matter, and I hope I'm not just being a blind idiot!
Oh, and here's the code (the TextBlock I'm talking about is the first one):
<ListBox Margin="0,-9,-12,0" ItemsSource="{Binding}" Name="listBoxNotes" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="548">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Canvas Height="175" Width="360" Background="{StaticResource PhoneAccentBrush}" toolkit:TiltEffect.IsTiltEnabled="True" Name="canvasNote" Tap="canvasNote_Tap">
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="26" Foreground="White" Canvas.Left="10" Canvas.Top="5" x:Name="Title" Width="100" MaxWidth="100"/>
<TextBlock Text="{Binding Details}" TextWrapping="Wrap" Width="352" FontSize="24" Foreground="White" Canvas.Left="10" Canvas.Top="35" />
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem with this is Canvas does not limit the size of their children, and especially theTextBlock control will grow as much as it needs.
Many ways to solve your problem :
Do not use TextBlock but a TextBox
Do not use Canvas but another container such as Border, Grid, StackPanel...
Try to clip the TextBlock content
<TextBlock.Clip>
<RectangleGeometry Rect="0, 0, 50, 30"/>
</TextBlock.Clip>