I'm using a Dockpanel as my main panel for my layout. The toolbar on top is set to top, while the side panel is set to left. The documentviewer is set to fill by LastChildFill.
The problem is that the height of the scrollviewer doesn't scale as the window resizes. Only the documentviewer does. It seems to only scale as the child content increases. I'm trying to mimic Google Chrome's Print layout. When the children does not overflow the window then there is no scrollbar but if it's less than the window, the scrollbars would fill up the window.
Here's the code:
<ToolBar Width="Auto" Height="35" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" Panel.ZIndex="10" Background="White">
<StackPanel Margin="5,0,0,0" Orientation="Horizontal">
<Button Content="New" Style="{StaticResource MenuItem}"/>
<Button Content="Save" Style="{StaticResource MenuItem}"/>
<Button Content="Print" Style="{StaticResource MenuItem}"/>
<Button Content="Delete" Style="{StaticResource MenuItem}"/>
<Button Content="Export" Style="{StaticResource MenuItem}"/>
<Border Style="{StaticResource SeparatorStyle}"/>
<Button Content="Burn DVD" Style="{StaticResource MenuItem}"/>
<Button Content="Open Folder" Style="{StaticResource MenuItem}"/>
<Border Style="{StaticResource SeparatorStyle}"/>
<Button Content="Next Patient" Style="{StaticResource MenuItem}"/>
</StackPanel>
</ToolBar>
<ScrollViewer Background="White" x:Name="SidePanel" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" Width="400" DockPanel.Dock="Left" Panel.ZIndex="2" Padding="10">
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin" Value="0,10,0,0"/>
</Style>
</StackPanel.Resources>
<Label Content="Patient Report" Style="{StaticResource SidePanel_H1}" />
<Rectangle Style="{StaticResource SidePanel_HR}" />
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
<TextBox Text="DATA"/>
</StackPanel>
</ScrollViewer>
<Rectangle Height="Auto" Width="2" DockPanel.Dock="Left" Fill="#FFA0A0A0"/>
<DocumentViewer x:Name="dv1" AllowDrop="False" Cursor="Hand" Loaded="dv1_Loaded" MinWidth="600">
<FixedDocument Focusable="False" x:Name="FD">
</FixedDocument>
</DocumentViewer>
</DockPanel>
Set VerticalAlignment="Stretch" or remove the attribute and you'll be fine.
DockPanel affects only one direction for docked children. In your case, it's horizontal.
Related
So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.
You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.
I am trying to get my view to only tab between a pick username textbox and a massage textbox xaml. My first problem is the tab gets stuck on the enter username, my guess is it has a custom control for search suggestions that is next in line. Also it tabs through every button in the view and i don't want it to do that. I have tried to add a Tabindex to both textboxes and it has no effect. I left the Tabidex in both textboxs so you know which ones I am trying to tab between.
<UserControl x:Class="Clinical.Patient.Views.SendMessageDialogView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DataContext="{d:DesignInstance
Type=viewModels:SendMessageDialogViewModel}"
mc:Ignorable="d"
d:DesignWidth="320"
xmlns:properties="clr-namespace:Clinical.Patient.Properties"
xmlns:viewModels="clr-namespace:Clinical.Patient.ViewModels"
xmlns:patient="clr-namespace:Clinical.Patient"
xmlns:self="clr-namespace:System;assembly=mscorlib"
xmlns:views="clr-namespace:Clinical.Patient.Views"
d:DesignHeight="350"
xmlns:termAutoComplete="clr-
namespace:Clinical.Patient.Controls.TermAutoComplete"
xmlns:controls="clr-namespace:Clinical.Patient.Controls"
KeyboardNavigation.TabNavigation="Local">
<UserControl.Resources>
<viewModels:IsAtLeastGradeConverter x:Key="IsAtLeastGradeConverter"/>
<viewModels:IsAtLeastAutoCloseGradeConverter x:Key="IsAtLeastAutoCloseGradeConverter"/>
</UserControl.Resources>
<Border Padding="8"
MinWidth="320"
ClipToBounds="False">
<Border BorderThickness="1"
BorderBrush="{DynamicResource FocusBorderBrush}"
CornerRadius="2"
Background="{DynamicResource FocusBackgroundBrush}">
<Border.Effect>
<DropShadowEffect Color="{DynamicResource SubtleDivideBorderColor}"
Opacity="1"
ShadowDepth="0"
BlurRadius="10" />
</Border.Effect>
<StackPanel Orientation="Vertical"
Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{x:Static properties:Strings.SharingReportIs}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"
FontWeight="Bold"/>
<Border Grid.Column="1"
Width="180"
Margin="5 5 20 5"
HorizontalAlignment="Left"
Background="{DynamicResource FocusBackgroundBrush}"
BorderBrush="{DynamicResource FocusBorderBrush}"
BorderThickness=".5"
CornerRadius="8,8,8,8">
<DockPanel HorizontalAlignment="Center">
<views:ExamTypeIconView DockPanel.Dock="Left"
Type="{Binding ExamType}"
Foreground="{DynamicResource CommonTextBrush}"
IconHeight="30"/>
<StackPanel DockPanel.Dock="Left"
Margin="3">
<TextBlock Text="{Binding Status}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"/>
<TextBlock Text="{Binding Accession}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"/>
</StackPanel>
</DockPanel>
</Border>
</Grid>
<DockPanel HorizontalAlignment="Left"
MinWidth="280"
Margin="0 5 0 0">
<Button
x:Name="To"
HorizontalAlignment="Right"
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding ToCommand}"
Content="to.." Width="65" />
<TextBox x:Name="SendTo"
Text="{Binding Recipient, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Style="{DynamicResource NavigationSearchTextBox}"
FontSize="{DynamicResource OneAndAQuarterFontSize}"
Padding="0 3 0 3"
VerticalAlignment="Center"
Width="225"
TabIndex="0"/>
<termAutoComplete:TermAutoComplete AutoCompleteSource="{Binding AutoCompleteSource}"
Padding="0 0 0 0"
TextBox="{Binding ElementName=SendTo}"/>
</DockPanel>
<Grid Margin="0 5 0 0">
<TextBlock Text="{x:Static properties:Strings.SharingMessage}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"
FontWeight="Bold" />
</Grid>
<TextBox x:Name="PeerReviewComments"
Margin="0 5 0 0"
MinLines="5"
AcceptsReturn="True"
TextWrapping="Wrap"
Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="295"
TabIndex="1"/>
<DockPanel
MinWidth="280"
Margin="0,5,-5,0"
>
<Button
x:Name="Save"
HorizontalAlignment="Right"enter code here
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding SendCommand}"
Content="Send" Width="65"
DockPanel.Dock="Right"
/>
<Button
x:Name="Cancle"
HorizontalAlignment="Right"
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding CancelCommand}"
Content="Cancel" Width="65"
DockPanel.Dock="Right"
/>
</DockPanel>
</StackPanel>
</Border>
</Border>
</UserControl>
I believe you need to replace "TabIndex" with "KeyboardNavigation.TabIndex".
If that doesn't work, you can also skip elements in the tab sequence by setting KeyboardNavigation.IsTabStop on the element in XAML.
KeyboardNavigation.IsTabStop="False"
Source
For controls where tab "gets stuck" add:
KeyboardNavigation.TabNavigation="Continue"
To avoid tab hitting a control add:
KeyboardNavigation.IsTabStop="False"
I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox
How can I create this...
command http://img841.imageshack.us/img841/2631/46lc.jpg
in WPF.
I've read alot of other questions on using stack panel vs dock panel but can't seem to recreate what I want. This is what I currently have..
command2 http://img13.imageshack.us/img13/5374/7oft.jpg
and my xaml..
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="DarkGray" Grid.ColumnSpan="2" Grid.Row="1" LastChildFill="False" >
<TextBlock Text="{StaticResource commandText}" Style="{StaticResource Heading2}" Margin="0,0,0,0" VerticalAlignment="Center" DockPanel.Dock="Left" />
<TextBox Name="inputTextBox" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
<Button x:Name="termSend" Content="{StaticResource sendText}" Margin="0,0,0,8" DockPanel.Dock="Right" VerticalAlignment="Center" />
</DockPanel>
<DockPanel>
<TextBlock VerticalAlignment="Center" Text="Command" DockPanel.Dock="Left"/>
<Button Content="Send" VerticalAlignment="Center" DockPanel.Dock="Right"/>
<TextBox VerticalAlignment="Center" Margin="5"/>
</DockPanel>
I have this grid in my Page and i have a problem that in landscape mode it rotate and the textbox and the button are stuck in the center and not stretch,any idea how to fix it?
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" >
<StackPanel Orientation="Vertical" Margin="0,0,0,0" Width="480">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
<TextBox Name="searchTextBox" Height="72" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="10,0,0,0" TextChanged="SearchTextDidChange" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Width="349" HorizontalAlignment="Left"/>
<Button Content="Search" Margin="0,-3,0,0" VerticalAlignment="Top" Height="77" Click="DidPressSearchButton" HorizontalContentAlignment="Right" VerticalContentAlignment="Top" Padding="14,5,10,6" HorizontalAlignment="Right"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
It is because you use stackpanel, use only the grid instead and set the column definition like this!
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<TextBox Name="searchTextBox"
Grid.Column="0"
Height="72"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Margin="10,0,0,0"
TextChanged="SearchTextDidChange"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
/>
<Button Content="Search"
Grid.Column="1"
Margin="0,-3,0,0"
VerticalAlignment="Top"
Height="77"
Click="DidPressSearchButton"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Top"
Padding="14,5,10,6"
HorizontalAlignment="Right" />
</Grid>
First remove the Width="480" attribute from the first StackPanel. Also remove the Width="349" attribute from the TextBox element.
That should allow the elements to stretch on landscape mode.