How can I do this with my current implementation ? My last option would be to use a StackPanel as it would involve changing a lot of other things . Any other workarounds would be appreciated.Image below .Incase it is not clear from the image :
In one straight line,
Extreme Left aligned : Apparels (count of defects)
Extreme Right aligned : Nearby outlets ( Count of nearby outlets)
Things I tried :
The flowDirection Property in RUn : did not work
Properties like alignment/orientation that are generally there for other controls don't seem to be there for Run.
<TextBlock
Grid.Column="0"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center">
<Run Text="{Binding Mode=OneWay, Converter={StaticResource Converter1}}" />
<Run Text="{Binding Defects, Converter={StaticResource Converter2}, Mode=OneWay}" />
<Run Text="{Binding Outlets, Converter={StaticResource Converter3}}" />
</TextBlock>
Related
I'm trying to make a simple invoicing application as part of an assessment. I have made a interface with a listbox that contains all the items that have been requested. However when I add too many items, the listbox then flows through the bottom of the window and I have to resize the window to fit.
I've tried a dockpanel, and I've assigned the stackpanel to the grid itself. If I set a fixed height it seems to work as expected.
Here is the xaml of the listbox:
<StackPanel Grid.Column="1" Grid.Row="0" ClipToBounds="True">
<ListBox Name="Shirts" HorizontalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="5" ClipToBounds="True">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding ShirtSize}" />
<Run Text="{Binding ShirtStyle}" />
<Run Text="{Binding ShirtColour}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Print Invoice" Margin="5" ClipToBounds="True"/>
</StackPanel>
I expected the code to work like this (it's not meant to be of fix height but it works as an example).
How it actually works.
Use a DockPanel instead of a StackPanel and it should work better. StackPanel will grow with its content regardless of its container size. A DockPanel will respect the container size and fill the available space. Put the button first in order with Dock="Bottom" and then the ListBox with Dock="Fill" (the list will arrange itself above the button even though it is declared after it, which is a bit unintuitive)
How I can fix it?
[
<CheckBox
x:Name="///"
Grid.Row="3"
Grid.Column="0"
IsChecked="{Binding ///, Mode=TwoWay}"
Style="{DynamicResource ///}" HorizontalAlignment="Left">
<CheckBox.Content>
<TextBlock
Grid.Row="3"
Grid.Column="0"
Style="{DynamicResource ///}" />
</CheckBox.Content>
</CheckBox>
I need to align this square to the left and the text to the right
but for some reason the square is constantly centered
I don't think you need to set the content. You can define a TextBlock inside the Checkbox
<CheckBox>
<TextBlock Text="MyCaption" />
</CheckBox>
Square to the left and label to the right is the normal behavior. Doing it the other way around is tricky.
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 am trying to make a single block of text composed of multiple TextBlocks
- THE TARGET
For example, I want to achieve like the line below:
"I read this line in a ListBox, notice the multiple text formatting"
The way I'm trying to do is
<StcakPanel Orientation="Horizontal" Width="400" >
<TextBlock Text="I read this line in a " TextWrapping="Wrap" />
<TextBlock Text="ListBox" FontStyle="Italic" TextWrapping="Wrap"/>
<TextBlock Text=", notice the multiple " TextWrapping="Wrap" />
<TextBlock Text="text formatting" FontWeight="Bold" TextWrapping="Wrap"/>
<StcakPanel>
- THE PROBLEM
The text does not fit in the StackPanel, despite of setting TextWrapping for TextBlocks and Width for StackPanel.
I want to generate this code at runtime. I don't know how many words do I need to format.
Kind of showing SearchResults with highlighted search keywords.
- THE QUESTION
How can the above target be achieved either using StackPanel or something else? Having the following constraints.
The text length is unknown
The number of textblocks in the stackpanel is unknown
width and height is Unknown
Thanks very much
You should use a single <TextBlock> which can contain multiple <Run>s that can each have their own formatting. If you want to insert a linebreak, you can use the <Linebreak /> control.
<StackPanel Orientation="Horizontal" Width="400" >
<TextBlock>
<Run Text="I read this line in a" />
<Run Text="ListBox" FontStyle="Italic" />
<Run Text=", notice the multiple" />
<Run Text="text formatting" FontWeight="Bold" />
</TextBlock>
<StackPanel>
At that point you probably don't even need the <StackPanel> unless you are going to have multiple <TextBlocks> stacked on top of one another.
See this post for more information and examples: http://www.danderson.me/posts/working-with-the-wpf-textblock-control/
To databind multiple runs within a TextBlock, see this answer: Databinding TextBlock Runs in Silverlight / WP7
Hello and thanks for the help. I have a Treeview that I am populating with a Hierarchical data template, and currently the bottom nodes have a tooltip that generates a small stack panel that is populated with data specific to the item the mouse hovers over. I also have a button sitting in the tooltip, however, as the tooltip does not persist when the mouse moves over it, I am unable to make use of the button like I need to. My xaml looks like this:
<!--=========================== Hierarchical Data template for tree view -->
<!--template for bottom nodes-->
<sdk:HierarchicalDataTemplate x:Key="ModTemplate" ItemsSource="{Binding ApplicationModules}">
<StackPanel Orientation="Horizontal" > <!--======tooltip style to handle format for callout window============-->
<ToolTipService.ToolTip>
<ToolTip HorizontalOffset="0" VerticalOffset="0" Style="{StaticResource ModuleToolTipStyle}">
<StackPanel Width="150" Height="auto" >
<TextBlock Text="Module Info" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock Text="Module State:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleState}" />
<TextBlock Text="Module Start Time:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleStartTime}"/>
<TextBlock Text="Module Down Time:" FontWeight="Bold"/>
<TextBlock Text="{Binding Path=ModInfo.ModuleDownTime}" />
<Button Content="More Info" Width="75"></Button>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
<!--============end tooltip style for callout window===================-->
<ContentPresenter Margin="0 0 4 0" Content="{Binding Icon}" />
<TextBlock FontStyle="Italic" Text="{Binding Path=ModuleName}" />
</StackPanel>
</sdk:HierarchicalDataTemplate>
I would like the tooltip to persist when the mouse moves over it so that I can wire an event to the button. How can I achieve this? Thanks again for the help.
You have a couple options to accomplish your goal that I'm aware of. You can go check out the Silverlight Advanced Tooltips project over on codeplex which does what you want (though I personally have not used it so can't give any kind of review.)
Or you can make your own with some creativity. If it were me I would probably skip all that mess, forget the ToolTipService all together and just make my own to dress it up since to a user, what you're providing isn't what they're used to in terms of a tooltip expectation anyway and have cross more over to a callout or popout functionality. I can make an example as soon as I get some freed up time if option #1 doesn't work for you but I hope it does. Essentially both my way, and that project link I provided would do the same thing, which is provide a delay after the MouseLeave event of what it's attached to so the user can get to it before it disappears. Then hand off its visibility condition to that object. Let me know if this doesnt work and I can give you an alternative example using nothing but XAML.