I am looking for a correct way to enable text wrapping in the header of Pivot control in my WP8 application.
Here is the code:
<phone:Pivot Title="MY APPLICATION">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" TextWrapping="Wrap"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="very long item name">
<Grid/>
</phone:PivotItem>
</phone:Pivot>
As you can see the 'TextWrapping' property is explicitly set to 'Wrap', but I do not observe any wrapping whatsoever. Does anyone know the workaround?
You need to set the Width of TextBlock explicitly for TextWrapping to work.
<TextBlock Text="{Binding}" TextWrapping="Wrap" MaxWidth="400" Height="Auto"/>
Above works fine.
Related
I'm trying to use a UserControl-derived control (UpdateBlockControl) inside the DataTemplate of a ListView, like this:
<ListView x:Name="AppsListView">
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:AppBase">
<StackPanel Orientation="Horizontal">
<local:UpdateBlockControl ImageSource="{x:Bind ImageSource}" AppName="{x:Bind Name}"/>
<TextBlock Text="{x:Bind Name}" Foreground="Orange" Margin="8,0,0,0" />
<TextBlock Text="{x:Bind ImageSource}" Margin="8,0,0,0" Foreground="LimeGreen"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
UpdateBlockControl is derived from UserControl and I'm trying to bind its properties (ImageSource and AppName) to the model's (AppBase) properties.
You can see me trying to set up these bindings in the first item in the StackPanel. Just to see if the binding works at all, I also bind a couple of TextBlocks to these properties.
The XAML for UserBlockControl is essentially this:
<StackPanel Orientation="Vertical">
<TextBlock Text=":-)"/>
<TextBlock Text="{x:Bind AppName}"/>
<TextBlock Text="{x:Bind ImageSource}"/>
</StackPanel>
When I run the application I see the following:
So the UserControl properties aren't working correctly it would seem: I get the :-) for the first TextBlock but the second and third TextBlocks are empty. Their equivalents in the ListView do work however (see image, above).
Should I be able to use a user control insisde a DataTemplate like this? If so, why aren't the bindings working?
x:Bind is Mode=OneTime by default. So, once a DependencyProperty is initialized inside the UserControl, it won't be updated anymore.
You need to add Mode=OneWay to x:Bind in UpdateBlockControl.
<StackPanel Orientation="Vertical">
<TextBlock Text=":-)" />
<TextBlock Text="{x:Bind AppName, Mode=OneWay}" />
<TextBlock Text="{x:Bind ImageSource, Mode=OneWay}" />
</StackPanel>
I am new to c# and UWP and looking for a way to enable horizontal scrolling with frozen column.
Currently this is my list :
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<ListView x:Name="Listeoffice" ItemsSource ="{x:Bind salesoffices}" Margin="0,60,0,0" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled">
<ListView.ItemTemplate>
<DataTemplate x:Name="Template1" x:DataType ="data:office">
<StackPanel Orientation="Horizontal" Margin="0,20,0,0" Width="700" >
<TextBlock Text="{x:Bind caption}" Margin="10,0,0,0" Width="50"/>
<TextBlock Text="{x:Bind invoices}" Margin="50,0,0,0" Width="90"/>
<TextBlock Text="{x:Bind order_entry}" Margin="30,0,10,0" Width="88"/>
<TextBlock Text="{x:Bind delivery_backlog}" Margin="10,0,20,0" Width="100"/>
<TextBlock Text="{x:Bind delivery_new}" Margin="10,0" Width="88"/>
<TextBlock Text="{x:Bind delivery_total}" Margin="20,0,10,0" Width="88"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
The problem is with this approach when I scroll horizontal the first column will not stay.
I read something about using a second ScrollViewer just for the first column but i cant get it working.
EDIT :
Sry wasn´t precise enough. I dont want a header but the first column (the left one) to stay even if the list gets scrolled horizontal.
I think you want header of your ListView.
ListView has a Header property.
<ListView>
<ListView.Header>
your header
</ListView.Header>
</ListView>
<Grid.Resources>
<DataTemplate x:Key="trackTemplateY">
<TextBlock x:Name="txbValueY" Text="{Binding ValueX}" Margin="5" FontSize="11" FontWeight="Medium"/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="{Binding ElementName=txbValueY,Mode=OneWay,Path=Text}"
Background="Orange" Foreground="White"/>
I try this above code but i cant to bind the text, how can i bind inside resources textblock text to outside the resources, Thanks
I am guessing that you are trying to show Text present in TextBlock resource in your second non-resource TextBlock.
You don't need DataTemplate. As you will progress ahead in WPF journey, you will come to know about those.
Below code will show "Resource Text" in your second TextBlock.
<Grid.Resources>
<TextBlock x:Key="TbRes1" Text="Resource Text" x:Name="txbValueY" Margin="5" FontSize="11" FontWeight="Medium"/>
</Grid.Resources>
<TextBlock Text="{Binding Source={StaticResource TbRes1},Mode=OneWay,Path=Text}"
Background="Orange" Foreground="White"/>
All sorts of problems here:
You're specifying Mode.TwoWay in your TextBlock Text binding, it should be Mode.OneWay.
You're binding to the Label's Text property. Label doesn't have a Text property, only Content. And it's not a dependency property so you can't bind to it. (That said, a fluke of the internal mechanics does cause it to appear to work under certain conditions).
A template is exactly that: a template. You can't bind to something that doesn't exist, so the binding is meaningless.
Maybe you could clarify exactly what it is you're trying to do so we can suggest an alternative way of achieving it? Specifically, show us exactly how you're instantiating that DataTemplate.
UPDATE:
You need the first textbox to be created in order for the second one to bind to it, simply declaring it inside a DataTemplate doesn't cause that to happen by itself, so the direct binding will fail. Binding UI elements together like this should generally be avoided though, why can't you simply give the second textbox the same binding as the first?
<Grid>
<Grid.Resources>
<DataTemplate x:Key="trackTemplateY">
<TextBlock x:Name="txbValueY" Text="{Binding ValueX}" Margin="5" FontSize="11" FontWeight="Medium"/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="{Binding ValueX}" Background="Orange" Foreground="White"/>
</Grid>
If for some reason this isn't possible then you can also create a binding proxy object (see this page for details):
<Grid>
<Grid.Resources>
<local:BindingProxy x:Key="proxy" Data="{Binding ValueX}" />
<DataTemplate x:Key="trackTemplateY">
<TextBlock x:Name="txbValueY" Text="{Binding ValueX}" Margin="5" FontSize="11" FontWeight="Medium"/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="{Binding Source={StaticResource ResourceKey=proxy}, Path=Data}" Background="Orange" Foreground="White"/>
</Grid>
Again, there are ways to bind to the data template declaration if you really want to, but to do that I'd have to see details of how your data template is being created at runtime.
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 a listBox and add data to it like so:
for (int x = 0; x < Orchestrator.Instance.getTopicCount(); x++)
{
listTopics.Items.Add(Orchestrator.Instance.getTopic(x));
}
But I need to be able to do things like have text wrapping and divider lines, so I would like to do it the XAML.
Microsoft shows this:
<TextBlock Width="248" Height="24"
Text="{Binding ElementName=lbColor, Path=SelectedItem.Content,
Mode=OneWay}"
x:Name="tbSelectedColor"
Background="{Binding ElementName=lbColor, Path=SelectedItem.Content,
Mode=OneWay}"/>
But I don't really understand it. Here is my XAML:
<ListBox Height="261" HorizontalAlignment="Left" Margin="352,38,0,0" Name="listContent" VerticalAlignment="Top" Width="391" Grid.Column="1" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" MaxWidth="391" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
How am I able to achieve what I want? (Divider lines, text wrapping so I don't have to scroll horizontally, and data binding)
To specify the layout of each item, there are two different things you can change: the ItemContainerStyle, which provides the ControlTemplate used for each ListBoxItem, or the ItemTemplate, which provides the DataTemplate that is used to render each data item. The ItemTemplate is simpler to use if you're just getting started and haven't gotten the hang of ControlTemplates yet.
To get your text to wrap, there are two key things to do. Turn off the default horizontal scrolling of ListBox (which you got already), and set the TextWrapping property of your TextBlock to Wrap. To get to the TextBlock you need to define it in your ItemTemplate. Here's a simple example of the template declared inline, though you could also pull it out as a Resource. For the dividing line I used the simplest approach of a Border with only a bottom black line.
<ListBox x:Name="listContent" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="Black">
<TextBlock Text="{Binding}" TextWrapping="Wrap"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It seems that you will have to ascend the rather steep learning curve for how to use databinding in WPF first. Thereafter you should learn about DataTemplates and ItemTemplates to get the dividers and so forth.
Try this to get you started
A book I can heartily recommend is WPF in Action from Manning.
You need to define the ItemTemplate of your ListBox.
In your resources, add this:
<DataTemplate x:Key="myItemTemplate" TargetType="ListBoxItem">
<TextBlock Text="{Binding}"/>
</DataTemplate>
Supposing that your getTopic method returns a string, otherwise use {Binding MyTopicProperty} where MyTopicProperty is a property in your Topic class. Customize the TextBlock as you need.
Then use your ListBox like this:
<ListBox ItemTemplate="{StaticResource myItemTemplate"/>
here is an example how to bind listbox with RSS feed with DataTemplate:
<UserControl.Resources>
<XmlDataProvider x:Key ="DataRSS" XPath="//item" Source="http://rss.feedsportal.com/c/629/f/502199/index.rss">< /XmlDataProvider>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<ListBox ItemsSource="{Binding Source={StaticResource DataRSS}}" Height="516" Margin="0,0,32,0" Background="{x:Null}" BorderBrush="#FF627DAE">
<ListBox.ItemTemplate >
<DataTemplate >
<Grid Width="400" Height="100" >
<Image Source="{Binding XPath=enclosure/#url}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding XPath=title}" FontWeight="Bold" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</grid>