From what I have read, there appears to be no functionality to achieve an underline for TextBlocks or HyperlinkButtons or the like in Windows RT, which appears ludicrous, but anyway, does anybody have an elegant approach to tackling this, specifically to create a link which runs a Click event or binding command?
As you can see out-of-the-box support doesn't appear to exist: http://social.msdn.microsoft.com/Forums/en-CA/winappswithcsharp/thread/cba0c363-60da-4e
This is how I've solved this problem before.
<HyperlinkButton x:Name="ExamplesLink" Click="ExamplesLink_Click"
Extensions:FrameworkElementExtensions.SystemCursor="Hand">
<TextBlock>
<Underline>
<Run Text="Examples"/>
</Underline>
</TextBlock>
</HyperlinkButton>
If you have the WinRT XAML toolkit you can set your cursor with the extension like above as well.
If you need (as in my case) to template the HyperlinkButton, keeping your bindings in your view, in you can do that in this way:
<Style TargetType="HyperlinkButton"
x:Key="StandardHyperlinkButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Style="{StaticResource BaseEntityDetailTextStyle}">
<Underline>
<Run Text="{Binding Path=Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Underline>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...and then in your XAML view, for example:
<HyperlinkButton Style="{StaticResource StandardHyperlinkButton}"
Content="{Binding Path=myContent, Mode=OneWay}"
Command="{StaticResource myCommand}"
CommandParameter="{Binding Path=myContent, Mode=OneWay}" />
In this way you can also solve #sacha problem with bindings!
You can use a RichTextBlock with embedded HyperlinkButtons. If you look at RichTextBlockExtensions - you can use it to bind html text fragments (with anchor tags) to automatically populate a RichTextBlock with a linked text setup.
The problem with the above Hyperlinkbutton, AFAIK is that the Run Text is not bindable, so you end up having to repeat that TextBlock/Underline/Run pattern for every hyperlink button. Far better would be to make it a style.
For example if you try this, it will not work and an UnhandledException occurs
<HyperlinkButton Width="Auto" Height="Auto" Margin="2"
Content="{Binding DoctorName}"
Command="{Binding ElementName=scheduleView,
Path=DataContext.NavigateToAppointmentsDetailCommand}"
CommandParameter="{Binding DoctorName}">
<HyperlinkButton.Template>
<ControlTemplate>
<TextBlock>
<Underline>
<Run Text="{TemplateBinding Content}"/>
</Underline>
</TextBlock>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
The only way I found to fix this where the hyperlink text was also bindable was to use a fake underline rectangle and a regular button. I then show the underline (fake rectangle) based on whether the Pointer is over the button. Here is the relevant code:
Not the best solution but it is bindable for the content (link text), and its a generic solution.
<Button Width="Auto" Height="Auto" Margin="2"
Style="{StaticResource HyperLinkButtonStyle}"
Content="{Binding DoctorName}">
</Button>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="rect">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates"/>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txt"
Text="{TemplateBinding Content}"
HorizontalAlignment="Center"
FontFamily="Segoe UI" FontSize="18" FontWeight="Thin"/>
<Rectangle x:Name="rect" Fill="White" Height="2" Visibility="Collapsed"
VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I want to develop app which is targeting to Multi resolution Device i Windows Phone(i.e. : 480*800 to 1080*1920)
this is my code for list box
<ListBox x:Name="LstContact">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#cbc6c0"
BorderThickness="0,0,0,2"
Margin="10">
<Grid >
<TextBlock Text="{Binding FirstName}"
Foreground="Black"
FontSize="22"
Margin="10" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And output should be like this
please help to that
It is Silverlight, so just put something like Width="480" to your Border and you are done.
I'm developing an app on Windows Phone 8, but when I select data from the Web service, it's cutting.
This is my code:
<Grid Background="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<ScrollViewer Grid.Row="1" Background="Yellow" >
<ItemsControl>
<TextBlock Grid.Row="1" Foreground="Black" x:Name="tbIcerik" TextWrapping="Wrap" Text="{Binding Icerik}" Style="{StaticResource PhoneTextNormalStyle}">
</TextBlock>
</ItemsControl>
</ScrollViewer>
<!--ContentPanel - place additional content here-->
</Grid>
Can someone please tell me what I'm doing wrong?
Please try adding a margin to the Textblock control
Mehmet,
If you are new to the Windows Mobility Designing Please go through this link. Its very simple to understand
https://msdn.microsoft.com/en-us/library/windows/apps/jj207025%28v=vs.105%29.aspx
After that You can go through Metro Design Guidelines as well.
Thanks
The text block has a limitation of how many characters it can print. If the data you are getting is very huge , there are chances that when you scroll down , other parts of data is being truncated !
Let me know the response you are getting so that I can assist you further
Add Margin to your TextBlock name tbIcerik i.e Margin="10,0,0,10". This will leave equal space in front and back.
I want to show partition around each item of longlistselector like listview in android. I am unable to find any relevant data. All people are showing data without showing partition line etc.
<phone:LongListSelector x:Name="playerList"
IsGroupingEnabled="False" LayoutMode="List" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="446">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding info}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
I want to show some kind of partition around TextBlock
You could use a border in your listpicker datatemplate.
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
Here is how my Pivot control looks on my WP app.
here is the code for same.
<phone:Pivot>
<!--Pivot item one-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/alarmClock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello1"/>
</Grid>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem >
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/clock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<!--Pivot item three-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/timer.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
I want to customized how the header looks. This is how i want the headers to align itself (see below image). I am not sure how it is to be done. Below is how i want it to look with the black grid and vertical pipes. Can anyone help me with this ? I think i will have to write a Style for same. However, I don't know in which way i can defined a style so that alignment is changed as per below.
The closer to what you want to achieve is this with no much effort:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PivotHeader">
<Grid Margin="-11,0,-11,0">
<Border BorderBrush="#FFF70000" BorderThickness="1">
<Grid Width="152" HorizontalAlignment="Center">
<Image Height="80" Source="{Binding}"></Image>
</Grid>
</Border>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot HeaderTemplate="{StaticResource PivotHeader}">
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 1"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>
However you will notice that a Pivot Control does not work like tabs on Android and iPhone.
I wouldn't recommend changing the behavior of the pivot control in Windows Phone either.
Maybe the best way to achieve what you are trying to do is to use buttons at the top of a pivot page and manually handle their behavior by modifying pivots selection changed.
In a Xaml/C# WinRT application, whenever a ListViewItem is selected, the first letter on the left gets chopped off. How can I prevent this?
<ListView>
<ListViewItem Content="Hello World"/>
</ListView>
Unselected and Full:
Selected and Truncated:
You can apply a margin to an item within the ListViewItem itself like below, which will stop the cut off. Alternatively you could use a ContentTemplate as the second example.
Example 1:
<ListView>
<ListViewItem>
<TextBlock Text="Hello World" Margin="5,0,0,0"/>
</ListViewItem>
</ListView>
Example 2:
<ListView>
<ListViewItem Content="Hello World!">
<ListViewItem.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="5,0,0,0"/>
</DataTemplate>
</ListViewItem.ContentTemplate>
</ListViewItem>
</ListView>
As a follow up to Brandon Scott's answer, if you would rather not apply this inline, you can set this behavior as a style and then apply that style to individual list items like so
<Application.Resources>
<ResourceDictionary>
<Style x:Key="ListViewItemMagin" TargetType="ListViewItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="5,0,0,0"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
Then, apply the style to your list view items
<ListView>
<ListViewItem Content="Hello World" Style="{StaticResource ListViewItemMagin}"/>
</ListView>
If you want to enable this by default, you can omit the x:Key property on the style and it will automatically apply to any element matching the TargetType; like so:
<Style TargetType="ListViewItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="5,0,0,0"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>