<ContentControl Width="120">
<ContentControl.Content>
<ContentControl>
<ContentControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="ABC" TextAlignment="Right" HorizontalAlignment="Right"/>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</ContentControl.Content>
Please find the above code.
It's not getting right aligned.
It is working, but ContentControl by default aligns it's content to the left with just enough place to show.
You can just set HorizontalContentAlignment to Right in ContentControl, so child don't have to worry about it:
<ContentControl Width="120" HorizontalContentAlignment="Right">
<TextBlock Text="ABC" />
</ContentControl>
Or you can set HorizontalContentAlignment to Stretch and leave the rest for child to figure out:
<ContentControl Width="120" HorizontalContentAlignment="Stretch">
<TextBlock Text="ABC" HorizontalAlignment="Right" />
</ContentControl>
Related
wrapped text will keep center not left
Is there any way to setup text wrapping so that all of the text in the text block is center-aligned?
<ContentPresenter x:Name="CPMessage"
Content="{Binding BodyContent, ElementName=control, Mode=OneWay}"
Margin="32,0,32,36"
TextWrapping="WrapWholeWords"
HorizontalAlignment="Center"
VerticalAlignment="Top"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
FontSize="16" />
Fixed it pretty easily by myself with the below code
<TextBlock Text="{Binding BodyContent, ElementName=control, Mode=OneWay}"
TextWrapping="WrapWholeWords"
TextAlignment="Center" />
Add the code inside of COntentPresenter
I am creating a Windows 10 universal App and I Have successfully created shell.xaml but I don't wanna use radioButton instead of that I have used a button and TextBlock.
I want to know how to make the TextBlock and Button a Single clickable entity through listView Item.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="mySplitView" DisplayMode="CompactInline" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150" Content="{Binding}">
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White">
<TextBlock Foreground="White" FontSize="10" VerticalAlignment="Center" />
</StackPanel>
From what I understand you want to make an event fire whenever you press somewhere inside the StackPanel that contains the Button and TextBlock.
One solution would be to simply put your Button and TextBlock inside a ListView item.
Like this (I include all the xaml for the SplitView.Pane to make it a bit more clear):
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<ListView>
<ListView.Items>
<ListViewItem Padding="0" Tapped="ListViewItem_Tapped">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="50">
<Button FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" />
<TextBlock Foreground="White" FontSize="10" Text="Wop wop!" VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
</ListView.Items>
</ListView>
</StackPanel>
</SplitView.Pane>
In this example only the '%' is shown when the pane is closed and the '%' plus the text "Wop wop!" when it's open. Whenever the content of this ListViewItem (the buton or TextBlock) is pressed, the method "ListViewItem_Tapped" will fire.
If I in any way misunderstood your question or you need any more info about my answer please let me know.
Have a wonderful day!
PS. The button still "acts" like a button, by showing it's own border, visual states and so on. I don't know from the top of my head how to disable this. But you could perhaps try disabling it or using another textblock instead? .DS
I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.
I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance
Hi I am trying to get my UI have scrolling in partial page having a list. Here's my code -
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTerm" Text="potato" Width="379" />
<Button x:Name="btnSearch" Content="Go" Click="btnSearch_Click" />
</StackPanel>
<TextBlock x:Name="noResultsTxt" Visibility="Collapsed" Margin="10, 30, 0, 0" Text="No results found! try different search term" Style="{StaticResource PhoneTextNormalStyle}" />
<ScrollViewer Height="520" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="itemlist" SelectionChanged="itemlist_SelectionChanged" Margin="0,10,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<TextBlock Text="{Binding Title}" FontSize="35" FontWeight="Normal"/>
<TextBlock Text="{Binding CommaCategories}" FontSize="20" FontWeight="Light" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Doesnt seem to be scrolling at the List area. i seem to have figured out that the issue is with Scrollviewer not able to interact where ListBox exists. I verified that the scrolling is happening perfectly fine by setting IsHitTestVisible property of ListBox to be false.
Can someone help me out!
Answering my own question! Just as AMR commented it, I figured out that I don't need the scroll viewer, I just set the height of ListBox and scrolling worked fine! :)
On why external scrollviewer wont work with Listbox - https://stackoverflow.com/a/1294786/729032