I'm trying to experiment with WPF, so I created some test window to see how it goes and I encountered a little behavior I did not expect with the HorizontalAlignment property.
First of all the screen looks like this:
The problem is, that in the bottom row of the marked grid, I wanted to have the left textBlock and CheckBox aligned to the left, the center textBlock and DatePicker aligned to the center and the same with the right. As you can see in the picture earlier, it doesn't really happen.
The XAML for this grid row:
<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Margin="10">Filter By Date</TextBlock>
<CheckBox HorizontalAlignment="Left" Margin="2" Height="18" Width="13"></CheckBox>
<TextBlock HorizontalAlignment="Center" Margin="10">Begin Date</TextBlock>
<DatePicker HorizontalAlignment="Center" Margin="2"> </DatePicker>
<TextBlock HorizontalAlignment="Right" Margin="10">End Date</TextBlock>
<DatePicker HorizontalAlignment="Right" Margin="2"></DatePicker>
</StackPanel>
How do i make them be closer to the edges and center and not just one after another like I guess is the automatic StackPanel's layout?
Horizontal StackPanel will ignore HorizontalAlignment of its children but you can use Grid instead with 3 StackPanel aligned left, centre and right:
<Grid Grid.Row="2" Grid.ColumnSpan="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock Margin="10">Filter By Date</TextBlock>
<CheckBox Margin="2" Height="18" Width="13"></CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Margin="10">Begin Date</TextBlock>
<DatePicker Margin="2"> </DatePicker>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock Margin="10">End Date</TextBlock>
<DatePicker Margin="2"></DatePicker>
</StackPanel>
</Grid>
Related
I have a stack panel which has another stack panel and I would like the second panel to be at the centre of first stack panel.I changed orientation of these panels and vertical alignment nothing works..
Anybody worked on this ? I would like to have your help.
Update:
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="White" Visibility="Visible" Orientation="Vertical">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar Margin="0,15,0,0"
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Margin="6,6,6,15" Foreground="Black" FontSize="21" TextWrapping="WrapWholeWords" HorizontalAlignment="Center" Text="Loading..."/>
</StackPanel>
</StackPanel>
The problem here is the StackPanel. What stack panel does is that it stacks the items from one side (top, left...) so it's not possible to fully center an item in StackPanel. When items are stacked vertically, the VerticalAlignment property has no effect on items that are direct children of the panel. The same applies for HorizontalAlignment and horizonal stacking.
You should use Grid or Border to center items (I also removed the Visibility values since Visible is the default state):
<Grid Grid.Row="0"
Grid.RowSpan="4"
Background="White"
>
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Row="0"
>
<ProgressBar Margin="0,15,0,0"
IsIndeterminate="True"
IsEnabled="True"
Foreground="Black"
/>
<TextBlock Margin="6,6,6,15"
Foreground="Black"
FontSize="21"
TextWrapping="WrapWholeWords"
HorizontalAlignment="Center"
Text="Loading..."
/>
</StackPanel>
</Grid>
Try this... You have to set Orientation to Horizontal of parent StackPanel.
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="White" Visibility="Visible" Orientation="Horizontal">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar Margin="0,15,0,0"
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Margin="6,6,6,15" Foreground="Black" FontSize="21" TextWrapping="WrapWholeWords" HorizontalAlignment="Center" Text="Loading..."/>
</StackPanel>
</StackPanel>
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.
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>
In WPF I want to show a control in a way that it should follow the contents of a dynamic Binding textblock. The xaml structre I used is:
<StackPanel Orientation="Vertical" >
<DockPanel Margin="2,3">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right"> //right side control here
<Button Tag="{Binding}" Style="{StaticResource ResourceKey=dbokLinkStyle}" Content="delete">
</Button>
</StackPanel>
<WrapPanel Orientation="Horizontal">
<TextBlock TextTrimming="WordEllipsis" TextWrapping="Wrap" Text="{Binding Quote}" FontWeight="Bold" FontSize="16"
VerticalAlignment="Center" ></TextBlock>
<Button Tag="{Binding}">
<StackPanel>
<TextBlock Text="Page"/>
</StackPanel>
</Button>
</WrapPanel>
</DockPanel>
<StackPanel Orientation="Horizontal">
Row 2 controls..
</StackPanel>
I want to show Page Button immediatly after the Textblock with binding Quotes. But the above xaml makes it always on right corner only. So how can I make it to follow the textblock control.
The layout is more like
Replace your WrapPanel with something like this:-
<TextBlock TextWrapping="Wrap">
<TextBlock TextTrimming="WordEllipsis" Text="{Binding Foo}" FontWeight="Bold" FontSize="16" VerticalAlignment="Center" />
<Button Content="Page" />
</TextBlock>
The entire TextBlock will wrap as its contents (i.e. the inner TextBlock and Button) get too long.
I'm trying to display a modal dialog with a spinning icon to indicate something happening in the background.
I'm using a Popup for the dialog and I've built a UserControl for the content.
The Popup displays fine, but the background is transparent. The content appears as expected. Ideally, I would like a black background with a white border on the popup.
Here is my UserControl:
<StackPanel VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
</StackPanel>
</StackPanel>
I don't see you defining a background or a border in your xaml. If you want a background and border, you must specify one. I would also recommend doing an "overlay" instead of a popup. An overlay allows you to disable the rest of the page.
<Grid x:Name="Overlay" Visibility="Collapsed">
<Grid Background="{StaticResource PhoneBackgroundBrush}" Opacity=".6"/>
<Border VerticalAlignment="Center" BorderThickness="2"
Background="{StaticResource PhoneBackgroundBrush}" BorderBrush="{StaticResource PhoneForegroundBrush}"
CornerRadius="5" Visibility="Visible" Margin="12">
<StackPanel VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"/>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"/>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"/>
</StackPanel>
</StackPanel>
</Border>
</Grid>
Show the overlay by setting it's visibility
Overlay.Visibility = Visibility.Visible;
You're not adding a Border or a Background to your StackPanel.
Something like this should work. Depending on your application, you may just want to use real colors, rather than those based on device theme.
<Border BorderThickness="2" BorderBrush="{StaticResource PhoneContrastForegroundBrush}">
<StackPanel Background="{StaticResource PhoneChromeBrush}" VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
</StackPanel>
</StackPanel>
</Border>