Let me start by saying sorry if this is a duplicate. I was unable to find an answer in any of the similar posts that I have read. I am having an issue where I have a Border control whose Height and Width are bound to the ActualHeight and ActualWidth of a TextBlock that is a child of the Border.
Everything displays fine in the designer, but for some reason at run-time, the Border control is not visible. I am not sure if it is because the Height or Width may be 0, or perhaps the Visibility is being set some other way. If I hard code the Height/Width then everything displays the same in the designer and at runtime, but something is acting bizarre with this binding. Even more bizarre, is that they were working before, and I'm not sure what I could have done to break them. Here is my XAML:
<Grid Visibility="{Binding Path=Contacts.Count, Converter={StaticResource ItemCountToVisibilityConverter}}" >
<Border CornerRadius="5"
BorderBrush="White"
BorderThickness="2"
Padding="20,15,0,15"
Margin="0,15,0,15">
<ListView ItemsSource="{Binding Path=Contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Number}" />
<TextBlock Text="{Binding Path=EmailAddress}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
<Border Background="White"
CornerRadius="5"
Height="{Binding Path=ActualHeight, ElementName=ContactsTextBlock}"
Width="{Binding Path=ActualWidth, ElementName=ContactsTextBlock}"
VerticalAlignment="Top">
<TextBlock Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Grid>
It is the second Border control in the XAML that is having the issue. As I said, it displays properly in the designer, but for some reason at runtime, the Border control as well as the TextBlock it contains are not visible. Also, the Grid is working properly, as well as the ListView and the first Border. It is simply the second Border and it's TextBlock that are not functioning properly.
Thanks in advance!
Here is what it looks like at design-time:
Let the Grid do the dirty work for you. I believe the Grid is one of the best controls WPF has.
The trick is dividing the vertical space in three slices, where the two on the top are sized accordingly to the desired space. That is, the TextBlock will determine how tall will be the row pair. You don't have to do anything than enjoying the result...
Here is a sample XAML (I cut the Visibility property for sake of simplicity):
<Grid Margin="40,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border
CornerRadius="5"
BorderBrush="White"
BorderThickness="2"
Padding="20,15,20,15"
Background="DimGray"
Grid.Row="1"
Grid.RowSpan="2"
>
<ListView ItemsSource="{Binding Path=Contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Number}" />
<TextBlock Text="{Binding Path=EmailAddress}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
<Border
Background="White"
CornerRadius="5"
Grid.Row="0"
Grid.RowSpan="2"
HorizontalAlignment="Center"
>
<TextBlock
Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
/>
</Border>
</Grid>
Please, note the ListView border is sharing the middle row, so that the borderline will run "striking" the text.
That renders as follows:
You may want to set up BorderThickness and BorderBrush:
<Border Background="White"
Border Background="White"
CornerRadius="5"
BorderThickness="1"
BorderBrush="Gray"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<TextBlock Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
Related
my list view inside the split view is not scrolling.
XAML code of total page goes like below.
<SplitView ScrollViewer.IsVerticalRailEnabled="True" BorderBrush="White" BorderThickness="1" x:Name="windowssplit1" DisplayMode="Overlay" Margin="40,-95,0,-200" Width="340" HorizontalAlignment="Left" x:FieldModifier="Public" Grid.RowSpan="2">
<SplitView.Pane>
<!--<Grid Background="Gray" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalScrollChainingEnabled="True">-->
<StackPanel Background="Gray" BorderBrush="White" BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.IsVerticalScrollChainingEnabled="True" Margin="0,49,0,-162">
<TextBlock Text="All Ages" Margin="20,10,0,10" Foreground="White" FontSize="20" />
<Border BorderThickness="0.4" BorderBrush="White" Margin="20,0,0,10" Width="280" HorizontalAlignment="Left"/>
<ListView x:Name="filterlist1" Margin="10,0,0,0" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalRailEnabled="True" SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</Grid>-->
</StackPanel>
</SplitView.Pane>
</SplitView>
The List View present in the Bolded Code must Scroll how this can be done, Help me....
How to make the List scroll
i think you need to put your listview inside a scrolViwer !
I believe this has to do with the panel that the ListView is in. Set the ListView to have a 'fixed' MaxHeight so that it can know when to scroll.
<ListView x:Name="filterlist1" Margin="10,0,0,0"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.IsVerticalRailEnabled="True"
SelectionChanged="filterlist_SelectionChanged"
MaxHeight="400">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
To make the ListView scrollable, we need give the ListView a explicit height or use a layout that can limit the height of ListView.
StackPanel is not suitable for this scenario as it won't limit the size of ListView. All items are showed in the ListView, but only these items in StackPanel can be seen.
We can use Grid instead of StackPanel and try with following code:
<SplitView x:Name="windowssplit1"
Grid.RowSpan="2"
Width="340"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="1"
DisplayMode="Overlay"
IsPaneOpen="True"
x:FieldModifier="Public">
<SplitView.Pane>
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="20,10,0,10"
FontSize="20"
Foreground="White"
Text="All Ages" />
<Border Width="280"
Margin="20,0,0,10"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="0.4" />
<ListView x:Name="filterlist1"
Grid.Row="1"
Margin="10,0,0,0"
SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,10,0,0"
FontSize="18"
Foreground="White"
Text="{Binding CategoryName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
</SplitView>
Here I set two rows in Grid and put the ListView in the second row. Second row's Height is set to * so it can get the rest Height of the Grid. I also remove the Margin in SplitView to see the scroll bar clearly.
I have this XAML on my windows phone:
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<StackPanel Margin="15,0,0,0" >
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<StackPanel x:Name="AccountsInfo" Grid.Column="1">
</StackPanel>
<StackPanel Grid.Column="2">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</phone:PanoramaItem>
In AccountsInfo Stackpanel I have like 5 accounts added programatically and RateChart is a chart. However, my rate chart should be below all the accounts and at the moment it is right in top of the screen and overlays first accounts. I don't know how to do the orientation.
Thanks for all the answers.
Looks to me like all you need is something like this. We get rid of the unnecessary panels, actually specify to your second StackPanel where it needs to be positioned within the parent Grid while ditching some unnecessary values on other properties. Hope this helps.
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto">
<RowDefinition Height="Auto">
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart"
Width="417"
Margin="0,25,0,0" />
</StackPanel>
</Grid>
</ScrollViewer>
</phone:PanoramaItem>
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
How do I make my middle column take up the full width available while allowing space for the comment section so that all those comment boxes are nicely aligned to the right:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
</StackPanel.Background>
<TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
I tried placing horizontal align on the third stackpanel but that actually didn't work.
EDIT: Thanks for the tries but no cigar:
You need to alter the style of the ListBoxItem itself to ensure that the content is stretched across the available width.
Define this style:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
Then the Right alignment of the "Comments" image will work and the central text box will stretch to fill the available space.
You might find that just using a StackPanel with an horizontal orientation works better than a Grid for the item template, especially if the data in columns 0 and 2 are a constant width.
Play around with the space given for the columns, for example:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
This gives the center column 3 times more space than the right column
It's hard to tell exactly what you want because of how you've blurred your image. But I think the key is to make the container of the grid take up all available space, HorizontalAlignment="Stretch".
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- items here -->
</Grid>
</StackPanel>
The item you set to have Grid.Column="0" will have width 67dip, the one with Grid.Column="2" will be width 60dip, and the one with Grid.Column="1"will fill up the rest of the space.
dip = device independent pixels - all Windows Phone apps are measured as if the screen is 480x800 and then rendered at the actual resolution of the screen.
Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. Avoid using it.
The problem stems from using a StackPanel as the top-most UIElement. Use a Grid instead and follow the rest of this advice:
Right align content in ListBox
Which leads to this answer as well:
C# windows phone -Alignment in xaml ListBox.ItemTemplate
Your problem is the Button, if it's not mandatory try deleting it and add a "Tap" Event to the StackPanel, i've tried it and it works.
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel Tap="...">
// no <Button> here
<Grid>
---
</Grid>
// no </Button> here
</StackPanel>
</DataTemplate>
better option
<DataTemplate x:Key="ActivityStreamItemTemplate">
<Grid Tap="...">
...
</Grid>
</DataTemplate>
So I have this problem, a textblock's text gets cut off, even though you can still scroll with scrollviewer to the end.
You can see the scrollviewer is still able to scroll to where the text should be.
Heres the XAML:
<Grid>
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<TextBlock x:Name="text" Padding="5" Margin="0" TextWrapping="Wrap" Text="" FontSize="24" TextTrimming="WordEllipsis" VerticalAlignment="Bottom" />
</ScrollViewer>
</Grid>
EDIT the whole pivot control code:
<controls:Pivot x:Name="pivot" Margin="0" Grid.Row="1" Title="title" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<controls:PivotItem Header="Straipsnis">
<Grid>
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<Border BorderBrush="White" BorderThickness="1">
<TextBlock x:Name="text" Padding="5" TextWrapping="Wrap" Text="" FontSize="24"/>
</Border>
</ScrollViewer>
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Komentarai">
<Grid>
<ListBox x:Name="commentsListBox" ItemTemplate="{StaticResource CommentsList}" Height="Auto" Width="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="20"/>
<TextBlock x:Name="errorText" TextWrapping="Wrap" Text="Nėra komentarų..." FontSize="36" HorizontalAlignment="Left" Margin="10,0,0,0"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
Well, turns out the TextBlock has limits, 2048x2048 or something like that, after which the text just gets cut off.
So, I found this custom text control that bypasses this limitation :) Maybe someone will find it useful, I did.
Creating Scrollable TextBlock for WP7.
Download link