WP7 - Textbox cursor position error - c#

I've got a text box (which I've made changes to by editing the template). I added a Scrollviewer to the border of the content element so that I have a horizontal scroll ability, just like the address bar text box in IE.
Now that I've added the ScrollViewer, when I select the text inside the text box the cursor is positioned incorrectly. A better way to illustrate this is below:
My XAML is:
<ScrollViewer Margin="{StaticResource PhoneTouchTargetOverhang}" Width="Auto" BorderThickness="3" HorizontalScrollBarVisibility="Hidden">
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Height="48" Width="Auto">
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" Style="{StaticResource ContentControlStyle1}"/>
</Border>
</ScrollViewer>
Basically that's it! all I added was that ScrollViewer and the error occurs. What can I do to solve this?
Thanks!

Try giving the ScrollViewer a fixed height

Related

How to use Border on StackPanel

So, I am trying to develop app in WPF (again). I wanted to have nice, black border with rounded corenrs around my StackPanel. In order to do this I have written:
<Border x:Name="debugPanel" CornerRadius="10" BorderBrush="Black" BorderThickness="2" Grid.Row="5" Grid.Column="6" Grid.RowSpan="2">
<StackPanel Grid.RowSpan="3" Background="#C7C7C7">
<!--contents-->
</StackPanel>
</Border>
But the result is ugly :( See below picture:
Note that it even might be wrong way of adding a border, I just figured it out myself. So if you have any recommendations and remarks, I would gladly hear them out as well.
Set the background on the border instead of the StackPanel:
<Border x:Name="debugPanel" Background="#C7C7C7" CornerRadius="10" BorderBrush="Black" BorderThickness="2" Grid.Row="5" Grid.Column="6" Grid.RowSpan="2">
<StackPanel Grid.RowSpan="3" Background="Transparent">
<!--contents-->
</StackPanel>
</Border>

Bringing a WPF border to front - a part of TextBox's autosuggestion project

I have a few issues with my autosuggestion project - I went with having a layout like this :
<Border Margin="30,125,44,77" BorderBrush="Black"
BorderThickness="1" Background="White">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Name="resultStack"></StackPanel>
</Border>
To display items of my autosuggestion list. The autosuggestion part works just fine but I have a problem with the layout. When I launch my window, both the border and scroll viewer elements are behind all the other parts of my window...
Before autosuggest fires :
After autosuggest fires :
This is obviously not what I wanted. I want both the border and scrollviewer elements to be in front of all other elements.
If more code has to be provided for this problem to be solved, please let me know.
Okay, the ZIndex tip from user TyCobb worked for me. I could've used a lower value if I didn't have other ZIndexes assigned in other places.
<Border Margin="30,125,44,77" Panel.ZIndex="5"
BorderThickness="1" Background="White" Visibility="Collapsed">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ActiveBorderColorKey}}"/>
</Border.BorderBrush>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Name="resultStack"></StackPanel>
</ScrollViewer>
</Border>

Windows phone 8.1 ComboBox style Image

I want to include an image directly into a ComboBox template.
I found this part of the code and I believe it is here where I would put it:
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" FontWeight="Normal" FlowDirection="{TemplateBinding FlowDirection}" FontSize="{ThemeResource ContentControlFontSize}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" MinHeight="{ThemeResource ComboBoxItemMinHeightThemeSize}" Padding="6.5,0,0,0" Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
</ContentPresenter>
</Button>
I can't put an Image inside contentPresenter because it says I can only set 'Content' once.
If I make something like:
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
<Image Source="ms-appx:///Assets/Arrow.png" />
</StackPanel>
</ContentPresenter>
It actually works but I get an error in my XAML view page: "No installed components were detected. Cannot resolve TargetName PlaceholderTextlock.". And also the image disappears after I select an item.
I'd appreciate some guidance.
I believe you want to set the items inside the combo box to have the image with the textblock. In that case you need to set the ItemTemplate of the combobox like this
<ComboBox Name="hik" ItemTemplate="{StaticResource cmbx}">
And in your page resources you can define the item template for combo box items like this
<DataTemplate x:Key="cmbx">
<StackPanel Orientation="Horizontal" Background="Aqua">
<TextBlock HorizontalAlignment="Left" Margin="0,0,0,0" Foreground="Black" TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Top"/>
<Image Source="/Assets/1.png" Stretch="Uniform" Height="100" Width="100" />
</StackPanel>
</DataTemplate>
Once that is done when you run it on clicking the combobox you can see the list with image
Hope this helps!

How to add a "Load More" button to bottom of listbox results?

Hello I'm making a call to a web service that returns results in pages. These results are bound to a listbox in which they are then displayed. I would like to add a "See More" results button to the bottom of the listbox when they scroll to the bottom. Any resources or suggestions on how to accomplish this are appreciated.
Here is an example: How to add a Control at the end of Items of a ListBox.
This is simplified version of standard template of ListBox:
<Border CornerRadius="2"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" TabNavigation="{TemplateBinding TabNavigation}">
<ItemsPresenter />
</ScrollViewer>
</Border>
You can wrap <ItemsPresenter /> with StackPanel, this will allow you to place any content to the scrollable area before or after list items.

How to make two images overlapping with WPF?

I have the following XAML code, which displays a picture (image inside borders) and a logo. Right now, the logo appears below the picture. This is expected, however my goal is to have the logo on top of the picture (precisely at the bottom-right corner). Does someone has an idea how to do that? Do we have layers in WPF?
Note: I absolutely need to keep the WrapPanel.
<WrapPanel>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</WrapPanel>
You should be able to do something along the lines of:
<WrapPanel>
<Grid>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</Grid>
</WrapPanel>
By not specifying any rows or columns our grid places the 2 items in row 0 column 0 and stacks them on top of each other. The second image has Horizontal and Vertical alignment set to make it appear in the bottom right, and I've added a margin to the 2nd image to bump it up a bit, otherwise it sits on the border which I assume is not what you wanted?
Put your picture and logo in a Canvas element and position them (Canvas.Top, Canvas.Left, etc) as needed.

Categories