I am having a problem that I want to include an ScrollViewer in my wpf application I used ScrollViewer property but it is just showing ScrollBar on the right side but it do not allow me to move.
My view gets down the Window but I do not able to see that. My code is:
<ScrollViewer >
<StackPanel Orientation="Vertical" ScrollViewer.CanContentScroll="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="65"/>
<!--<ColumnDefinition Width="205"/>-->
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="IP Configuration:"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Content="Wireless IP Address"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center"
/>
<Label
Grid.Row="2"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="AP Group Configuration"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="3"
Grid.Column="0"
VerticalAlignment="Center"
Content="Group ID"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<TextBox
Grid.Row="3"
Grid.Column="1"
VerticalAlignment="Center"
Margin="0,0,0,5"
/>
<Label
Grid.Row="3"
Grid.Column="2"
VerticalAlignment="Center"
Content="(1-1024)"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<Label
Grid.Row="4"
Grid.Column="0"
VerticalAlignment="Center"
Content="AP Hardware Type"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="4"
Grid.Column="1"
>
<ComboBoxItem >0-Any</ComboBoxItem>
<ComboBoxItem>21-ARC1000MAP , Indoor Radio b/g/n</ComboBoxItem>
<ComboBoxItem>22-ARC2000MAP , Dual Radio a/n, b/g/n</ComboBoxItem>
</ComboBox>
<Button
Grid.Row="4"
Grid.Column="2"
Margin="10,0,0,0"
Style="{StaticResource AppButtons}">
Add
</Button>
<TextBox
Grid.Row="5"
Grid.ColumnSpan="3"
IsReadOnly="True"
IsEnabled="False"
Visibility="Hidden"
Height="10"/>
<DataGrid Grid.Row="6"
Grid.ColumnSpan="3"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Width="100" Header="Group ID" />
<DataGridTextColumn Header="AP Hardware Type"/>
</DataGrid.Columns>
</DataGrid>
<Label
Grid.Row="7"
Grid.Column="0"
HorizontalAlignment="Left"
Content="Network Configuration"
FontWeight="ExtraBold"
Foreground="Black"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="8"
Grid.Column="0"
VerticalAlignment="Center"
Content="SSID"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="8"
Grid.Column="1"
VerticalAlignment="Center"
Text="Guest Network"
/>
<Label
Grid.Row="9"
Grid.Column="0"
VerticalAlignment="Center"
Content="Security"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="9"
Grid.Column="1"
ItemsSource="{Binding ACAvailableSecurityTypes}"
SelectedItem="{Binding ACSelectedSecurityType}"
>
</ComboBox>
<view:ACSecurityStaticWEP
Grid.Row="10"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Visibility="{Binding IsACStaticWep, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>
</StackPanel>
</ScrollViewer>
Your ScrollViewer height is infinite, set it to any value and that should do it
You need to set VerticalScrollBarVisibility of ScrollViewer
<ScrollViewer VerticalScrollBarVisibility="Auto >
Also your StackPanel Height property Should have some value
<StackPanel Height="500" Width="376" Orientation="Vertical" >
Complete Code:
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<StackPanel Height="700" Orientation="Vertical" ScrollViewer.CanContentScroll="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="65"/>
<!--<ColumnDefinition Width="205"/>-->
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="IP Configuration:"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Content="Wireless IP Address"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center"
/>
<Label
Grid.Row="2"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="AP Group Configuration"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="3"
Grid.Column="0"
VerticalAlignment="Center"
Content="Group ID"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<TextBox
Grid.Row="3"
Grid.Column="1"
VerticalAlignment="Center"
Margin="0,0,0,5"
/>
<Label
Grid.Row="3"
Grid.Column="2"
VerticalAlignment="Center"
Content="(1-1024)"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<Label
Grid.Row="4"
Grid.Column="0"
VerticalAlignment="Center"
Content="AP Hardware Type"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="4"
Grid.Column="1"
>
<ComboBoxItem >0-Any</ComboBoxItem>
<ComboBoxItem>21-ARC1000MAP , Indoor Radio b/g/n</ComboBoxItem>
<ComboBoxItem>22-ARC2000MAP , Dual Radio a/n, b/g/n</ComboBoxItem>
</ComboBox>
<Button
Grid.Row="4"
Grid.Column="2"
Margin="10,0,0,0">
</Button>
<TextBox
Grid.Row="5"
Grid.ColumnSpan="3"
IsReadOnly="True"
IsEnabled="False"
Visibility="Hidden"
Height="10"/>
<DataGrid Grid.Row="6"
Grid.ColumnSpan="3"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Width="100" Header="Group ID" />
<DataGridTextColumn Header="AP Hardware Type"/>
</DataGrid.Columns>
</DataGrid>
<Label
Grid.Row="7"
Grid.Column="0"
HorizontalAlignment="Left"
Content="Network Configuration"
FontWeight="ExtraBold"
Foreground="Black"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="8"
Grid.Column="0"
VerticalAlignment="Center"
Content="SSID"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="8"
Grid.Column="1"
VerticalAlignment="Center"
Text="Guest Network"
/>
<Label
Grid.Row="9"
Grid.Column="0"
VerticalAlignment="Center"
Content="Security"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="9"
Grid.Column="1"
ItemsSource="{Binding ACAvailableSecurityTypes}"
SelectedItem="{Binding ACSelectedSecurityType}"
>
</ComboBox>
</Grid>
</StackPanel>
</ScrollViewer>
Related
I am developing a small application when i need to scroll by code to a postion of a GroupBox Control, the part of my xaml files that contains the scrollviewer is the following one (I have a scrollviewer, inside a stackpanel and inside of that the GroupBox):
<ScrollViewer x:Name="scrollViewer" Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
<StackPanel x:Name="stackPanel" VerticalAlignment="Stretch" Margin="0,16,0,0">
<GroupBox x:Name="groupBox">
<GroupBox.Header>
<TextBlock Text="Desbloquear" FontWeight="Bold"/>
</GroupBox.Header>
<StackPanel Margin="0" Orientation="Vertical" Height="155" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="LightBlue">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Content="Usuario:" Grid.Row="0" Grid.Column="0" Margin="0,2,0,2"/>
<ComboBox x:Name="comboBoxUnblockUser" IsReadOnly="true" Margin="4,4,4,4" Grid.Row="0" Grid.Column="1"/>
<Label Content="Caja:" Margin="0,2,0,2" Grid.Row="1" Grid.Column="0"/>
<ComboBox x:Name="comboBoxUnblockCashMachine" Margin="4,4,4,4" IsReadOnly="true" Grid.Row="1" Grid.Column="1"/>
<Label Content="Estatus de solicitud:" Margin="0,2,0,2" Grid.Row="2" Grid.Column="0"/>
<Label x:Name="labelStatusUnblock" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="2" Grid.Column="1"/>
<Label Content="Mensaje de Soporte:" Margin="0,2,0,2" Grid.Row="3" Grid.Column="0"/>
<Label x:Name="labelMessageUnblock" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="3" Grid.Column="1"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Button x:Name="buttonSolicitudeUnblock" Content="Solicitar" HorizontalAlignment="Left" Margin="4,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold" Click="buttonSolicitudeUnblock_Click"/>
<Button x:Name="buttonExecuteUnblock" Content="Ejecutar" IsEnabled="false" HorizontalAlignment="Left" Margin="90,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
</Grid>
</StackPanel>
</GroupBox>
<GroupBox x:Name="groupBox2">
<GroupBox.Header>
<TextBlock Text="Desbloquear caja Impresora Fiscal" FontWeight="Bold"/>
</GroupBox.Header>
<StackPanel Margin="0" Orientation="Vertical" Height="125" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Content="Caja:" Grid.Row="0" Grid.Column="0" Margin="0,2,0,2"/>
<ComboBox x:Name="comboBoxUnblockFiscalMachine" IsReadOnly="true" Margin="4,4,4,4" Grid.Row="0" Grid.Column="1"/>
<Label Content="Estatus de solicitud:" Margin="0,2,0,2" Grid.Row="1" Grid.Column="0"/>
<Label x:Name="labelStatusUnblockFiscalMachine" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="1" Grid.Column="1"/>
<Label Content="Mensaje de Soporte:" Margin="0,2,0,2" Grid.Row="2" Grid.Column="0"/>
<Label x:Name="labelMessageUnblockFiscalMachine" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="2" Grid.Column="1"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Button x:Name="buttonSolicitudeUnblockFiscalMachine" Content="Solicitar" HorizontalAlignment="Left" Margin="4,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
<Button x:Name="buttonExecuteUnblockFiscalMachine" Content="Ejecutar" IsEnabled="false" HorizontalAlignment="Left" Margin="90,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
</Grid>
</StackPanel>
</GroupBox>
<GroupBox x:Name="groupBox3">
<GroupBox.Header>
<TextBlock Text="Reenvio de Cierre" FontWeight="Bold"/>
</GroupBox.Header>
<StackPanel Margin="0" Orientation="Vertical" Height="125" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="LightBlue">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Content="Fecha:" Grid.Row="0" Grid.Column="0" Margin="0,2,0,2"/>
<DatePicker x:Name="datePickerResendCloser" Margin="4,4,4,4" Grid.Row="0" Grid.Column="1" SelectedDate="{x:Static sys:DateTime.Now}" Focusable="False"/>
<Label Content="Estatus de solicitud:" Margin="0,2,0,2" Grid.Row="1" Grid.Column="0"/>
<Label x:Name="labelStatusResendCloser" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="1" Grid.Column="1"/>
<Label Content="Mensaje de Soporte:" Margin="0,2,0,2" Grid.Row="2" Grid.Column="0"/>
<Label x:Name="labelMessageResendCloser" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="2" Grid.Column="1"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Button x:Name="buttonSolicitudeResendCloser" Content="Solicitar" HorizontalAlignment="Left" Margin="4,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
<Button x:Name="buttonExecuteResendCloser" Content="Ejecutar" IsEnabled="false" HorizontalAlignment="Left" Margin="90,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
</Grid>
</StackPanel>
</GroupBox>
<GroupBox x:Name="groupBox4">
<GroupBox.Header>
<TextBlock Text="Cerrar caja (cuando se asignó mas no se usó)" FontWeight="Bold"/>
</GroupBox.Header>
<StackPanel Margin="0" Orientation="Vertical" Height="155" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label Content="Caja:" Grid.Row="0" Grid.Column="0" Margin="0,2,0,2"/>
<ComboBox x:Name="comboBoxCloseCashMachine" IsReadOnly="true" Margin="4,4,4,4" Grid.Row="0" Grid.Column="1"/>
<Label Content="Fecha:" Grid.Row="1" Grid.Column="0" Margin="0,2,0,2"/>
<DatePicker x:Name="datePickerCloseCashMachine" Margin="4,4,4,4" Grid.Row="1" Grid.Column="1" SelectedDate="{x:Static sys:DateTime.Now}" Focusable="False"/>
<Label Content="Estatus de solicitud:" Margin="0,2,0,2" Grid.Row="2" Grid.Column="0"/>
<Label x:Name="labelStatusCloseCashMachine" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="2" Grid.Column="1"/>
<Label Content="Mensaje de Soporte:" Margin="0,2,0,2" Grid.Row="3" Grid.Column="0"/>
<Label x:Name="labelMessageCloseCashMachine" Margin="0,2,0,2" Content="----------" FontWeight="Bold" Grid.Row="3" Grid.Column="1"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Button x:Name="buttonSolicitudeCloseCashMachine" Content="Solicitar" HorizontalAlignment="Left" Margin="4,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
<Button x:Name="buttonExecuteCloseCashMachine" Content="Ejecutar" IsEnabled="false" HorizontalAlignment="Left" Margin="90,0,0,0" VerticalAlignment="Top" Width="75" Height="30" ToolTip="Entrar a la aplicación"
Background="WhiteSmoke"
Foreground="Black"
FontFamily="Arial"
FontWeight="Bold"/>
</Grid>
</StackPanel>
</GroupBox>
</StackPanel>
</ScrollViewer>
I have tried other solutions in stackoverflow but i can't figure out why i can not handled it to work.
I just have the declaration of the function
private void ScrollToGroupBox(System.Windows.Controls.GroupBox groupBox)
{
//I NEED TO GET THE POSITION OF THE GRUOPBOX INSIDE OF THE SCROLLVIEWER
scrollViewer.ScrollToVerticalOffset(0);
}
private void ScrollToGroupBox(System.Windows.Controls.GroupBox groupBox)
{
groupBox.BringIntoView();
}
I'm having a really strange problem that I can't seem to figure out. If I try to bind like the first code below the binding inside the grid does not work.
<Controls:Flyout IsOpen="{Binding Ui.EditGameFlyOut, Mode=TwoWay}" Header="{Binding SelectedGame.Id, StringFormat='Edit Game [{0}]'}" Position="Right" Theme="Dark" Width="300">
<ScrollViewer>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Width="100" Content="Save" Cursor="Hand" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10" />
<Label Grid.Row="1">Title</Label>
<TextBox Grid.Row="2" Text="{Binding SelectedGame.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Margin="0,0,0,10" />
<Label Grid.Row="3">Release date</Label>
<DatePicker Grid.Row="4" Margin="0,0,0,10" SelectedDate="{Binding DatePickerDate}" />
<Label Grid.Row="5">Overview</Label>
<TextBox Grid.Row="6" Text="" Grid.Column="1" Margin="0,0,0,10" />
</Grid>
</ScrollViewer>
</Controls:Flyout>
But if I remove the grid control like the second code snippet it works no problem. Why could this occur?
<Controls:Flyout IsOpen="{Binding Ui.EditGameFlyOut, Mode=TwoWay}" Header="{Binding SelectedGame.Id, StringFormat='Edit Game [{0}]'}" Position="Right" Theme="Dark" Width="300">
<ScrollViewer>
<TextBox Grid.Row="2" Text="{Binding SelectedGame.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Margin="0,0,0,10" />
</ScrollViewer>
</Controls:Flyout>
I find this really strange…
I managed to fix it after a lot of research.
What I had to do was put a DataContext on the Grid such as the code below.
<Controls:Flyout IsOpen="{Binding Ui.EditGameFlyOut, Mode=TwoWay}" Header="{Binding SelectedGame.Id, StringFormat='Edit Game [{0}]'}" Position="Right" Theme="Dark" Width="300">
<ScrollViewer>
<Grid Margin="10" DataContext="{Binding SelectedGame}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Width="100" Content="Save" Cursor="Hand" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10" />
<Label Grid.Row="1">Title</Label>
<TextBox Grid.Row="2" Text="{Binding Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,0,10" />
<Label Grid.Row="3">Release date</Label>
<DatePicker Grid.Row="4" Margin="0,0,0,10" SelectedDate="{Binding DatePickerDate}" />
<Label Grid.Row="5">Overview</Label>
<TextBox Grid.Row="6" Text="" Margin="0,0,0,10" />
</Grid>
</ScrollViewer>
</Controls:Flyout>
I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?
I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
With the following XAML I get this layout:
<GroupBox Header="Adres" Grid.Row="1" Grid.RowSpan="5">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Left" Content="Straat:"/>
<TextBox Margin="130,0,0,0" Text="{Binding Address.Street}" Grid.Column="1" Grid.ColumnSpan="3" />
<Label HorizontalAlignment="Left" Grid.Row="1" Content="Nr:"/>
<TextBox Margin="130,0,0,0" Text="{Binding Address.Number}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" />
<Label HorizontalAlignment="Left" Grid.Row="1" Content="Ext:" Grid.Column="3"/>
<TextBox Margin="130,0,0,0" Text="{Binding Address.NumberExtension}" Grid.Row="1" Grid.Column="3" />
<Label HorizontalAlignment="Left" Content="Gemeente:" Grid.Row="2"/>
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.Towns}" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch">
</ComboBox>
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.Towns}" Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="2">
</ComboBox>
<Label Width="125" HorizontalAlignment="Left" Content="Land:" Grid.Row="3"/>
<TextBox Margin="130,0,0,0" Text="{Binding Address.Country}" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="3" />
</Grid>
</GroupBox>
Why don't my textboxes align with the columns I made? And why do the ComboBoxes DO align with the columns?
It seems the margins in your textboxes have been mistakenly set, causing their positioning to be misaligned with the grid's columns.
I'm design a simple login window and i'm very wondering about this.
Well, this is my XAML code
<Grid ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label x:Name="label_ID" Height="30"/>
<TextBox x:Name="textBox_ID" Height="20" TabIndex="0">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
<DockPanel Grid.Row="1">
<Label x:Name="label_PW" Height="30"/>
<PasswordBox x:Name="textBox_PW" Height="20" TabIndex="1">
<PasswordBox.Margin>
<Thickness Right="5"/>
</PasswordBox.Margin>
</PasswordBox>
</DockPanel>
<DockPanel Grid.Row="2">
<Label x:Name="label_IP" Height="30"/>
<TextBox x:Name="textBox_IP" Height="20" UndoLimit="2">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
</Grid>
label_ID's string is ID
label_PW's string is Password
label_IP's string is 'IP'
And the output is like this:
https://www.dropbox.com/s/k23ft06layp0sl4/1.PNG?dl=0
The password text box only short then other.
(I want to short another text boxes to.)
How can i fix location of text boxes?
Thanks.
I think your DockPanels are not really needed, instead you could use two columns in the Grid:
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" x:Name="label_ID" Height="30"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="textBox_ID" Height="20" TabIndex="0" Margin="5"/>
<Label Grid.Row="1" Grid.Column="0" x:Name="label_PW" Height="30"/>
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="textBox_PW" Height="20" TabIndex="1" Margin="5"/>
<Label Grid.Row="2" Grid.Column="0" x:Name="label_IP" Height="30"/>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="textBox_IP" Height="20" UndoLimit="2" Margin="5"/>
</Grid>
Setting the first column's width to Auto ensures that the text will be visible, the second column will take the rest of the space (*).
It produces an output like this (with some test strings added by me):
Simplest way I could think of is
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Name="lblID" Content="ID:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Margin="5,2,5,2" />
<TextBox Name="txtID" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblPwd" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="1" Margin="5,2,5,2" />
<PasswordBox Name="pwdBx" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblIP" Content="IP:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="2" Margin="5,2,5,2" />
<TextBox Name="txtIP" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,2,0,2" Width="250" Height="25" />
</Grid>
Right now I can only think of using the margin property as in:
<UIElement Margin="left, top, right, bottom" />
<Menu Name="EgMenu"
Margin="20,20,0,20" />
The margin property will help you position and size your UI elements in an easiser way thatt youy can visualise just looking at the text. But why not use WYSIWYG and, refine by editting XAML later.