Related
I am having issues with sizing my WPF program so that it can adapt to resolution of the user's screen. I have two screenshots below, one is taken at 1600 x 900 and one at 1920 x 1080. Neither of them are how I want my application to look;
1600 x 900
1920 x 1080
As you can see from the first image, at the lower resolution there are parts of the UI that are just off of the screen. I could use a ScrollViewer but I would much prefer for the elements to actually fit the screen vertically and then use a ScrollViewer horizontally if neccessary.
In the second image, because I have tried to adapt the program so that it fits the lower resolution, there is now a vast amount of unused space that I would like the UI to fill into, instead of leaving blank. I feel like I have an overall understanding of * and auto as widths but feel like the general layout is wrong. Here is a snapshot of some XAML for these screenshots;
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto" MinWidth="180"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="auto" MaxWidth="160"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FF5FCFBA" Stroke="Black" Grid.ColumnSpan="4" Grid.RowSpan="2"/>
<Label x:Name="jobTitleLabel" Content="Job" HorizontalAlignment="Left" Margin="26,10,0,5" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Grid.ColumnSpan="4"/>
<StackPanel Grid.Row="1" >
<Label Content="Reference:" FontSize="14" HorizontalAlignment="Right" Margin="0,0,0,1" VerticalAlignment="Center" />
<Label Content="Description:" FontSize="14" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Center" />
<Label Content="Created:" FontSize="14" HorizontalAlignment="Right" Margin="0,5,0,0" Grid.Row="1" VerticalAlignment="Center" />
<Label Content="Deadline:" FontSize="14" HorizontalAlignment="Right" Grid.Row="2" VerticalAlignment="Center" Margin="-2,7,0,0" />
<Label Content="Start Date:" FontSize="14" HorizontalAlignment="Right" Grid.Row="2" VerticalAlignment="Center" Margin="-2,7,0,0" />
<Label Content="Employee Name:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,4,0,0" />
<Label Content="Who's Job:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,7,0,0" />
<Label Content="Priority:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,7,0,0" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1">
<TextBox x:Name="jobReferenceTextBox" Margin="5" FontSize="14" Grid.Column="1" VerticalAlignment="Center"/>
<TextBox x:Name="jobTitleTextBox" Margin="5" FontSize="14" Grid.Column="1" VerticalAlignment="Center" MaxWidth="291" MaxLength="30"/>
<wpftk:DateTimePicker x:Name="createdPicker" AutoCloseCalendar="True"
Margin="5,7,5,5" Format="Custom" FormatString="dd/MM/yyyy"
FontSize="14" TextAlignment="Left"
TimeFormat="LongDate" TimePickerAllowSpin="False"
TimePickerShowButtonSpinner="False"
TimePickerVisibility="Hidden" ShowButtonSpinner="False"
AllowTextInput="False"/>
<wpftk:DateTimePicker x:Name="deadlinePicker" AutoCloseCalendar="True" Margin="5,8,5,5" Format="Custom" FormatString="dd/MM/yyyy" FontSize="14" TextAlignment="Left" TimeFormat="LongDate" TimePickerShowButtonSpinner="False" TimePickerAllowSpin="False" TimePickerVisibility="Hidden" ShowButtonSpinner="False"/>
<wpftk:DateTimePicker x:Name="startDatePicker" AutoCloseCalendar="True" Margin="5,8,5,5" Format="Custom" FormatString="dd/MM/yyyy" FontSize="14" TextAlignment="Left" TimeFormat="LongDate" TimePickerShowButtonSpinner="False" TimePickerAllowSpin="False" TimePickerVisibility="Hidden" ShowButtonSpinner="False"/>
<TextBox x:Name="nameTextBox" Margin="5,6,5,5" FontSize="14" Grid.Column="1" Grid.Row="3" VerticalAlignment="Center" />
<ComboBox x:Name="itNameComboBox" Margin="5,7,5,5" FontSize="14" SelectedValuePath="Tag">
<ComboBoxItem Content="Unallocated" Tag="Unallocated"/>
<ComboBoxItem Content="Adam" Tag="AdamD"/>
<ComboBoxItem Content="Chris" Tag="Chris"/>
<ComboBoxItem Content="Dan" Tag="DanD"/>
<ComboBoxItem Content="Emily" Tag="EmilyC"/>
<ComboBoxItem Content="Kit" Tag="KitL"/>
<ComboBoxItem Content="Matt" Tag="Matt"/>
</ComboBox>
<ComboBox x:Name="priorityComboBox" Margin="5,7,5,5" FontSize="14" SelectedValuePath="Tag">
<ComboBoxItem Content="High" Tag="High"/>
<ComboBoxItem Content="Medium" Tag="Medium" />
<ComboBoxItem Content="Low" Tag="Low" />
</ComboBox>
</StackPanel>
<StackPanel Grid.Column="3" Grid.Row="1">
<ComboBox x:Name="jobPresetComboBox" IsEnabled="False" IsEditable="True" IsReadOnly="True" Text="Choose Predefined Job" Margin="5" FontSize="14" Grid.Column="1" Grid.Row="4" SelectionChanged="JobPresetComboBoxSelectionChanged" />
<Button x:Name="addJobButton" Content="Add a New Job" Margin="5" Click="AddJob" FontSize="14" Grid.Column="1" Grid.Row="4" />
<Button x:Name="updateButton" Content="Update Job Details" Margin="5" FontSize="14" Grid.Column="1" Grid.Row="4" Click="UpdateJob"/>
<Button x:Name="markAsCompletedButton" Content="Mark as Completed" Margin="5" FontSize="14" Click="MarkAsCompleted"/>
<Button x:Name="deleteButton" Content="Delete Job" Margin="5" FontSize="14" Click="DeleteJobPermanently"/>
<Button x:Name="excelButton" Content="Export to Excel" Margin="5" FontSize="14" Click="ExportToExcel"/>
<Button x:Name="restoreButton" Content="Restore Selected Job" Margin="5" FontSize="14" Visibility="Collapsed" Click="RestoreJob"/>
<Button x:Name="addToHistoryButton" Content="Add to History" Margin="5" FontSize="14" Visibility="Collapsed" Click="AddJobToHistory"/>
<Button x:Name="cancelButton" Content="Cancel Job Add" Margin="5" FontSize="14" Visibility="Collapsed" Click="CancelJobAdd"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1">
<TextBox x:Name="notesTextBox" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="5" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" AcceptsReturn="True" MinHeight="260" MaxHeight="260" MaxWidth="400" MinWidth="400"/>
</StackPanel>
<Grid x:Name="bnumGrid" Grid.Column="4" Grid.Row="1" Margin="8,0,10,0" MinWidth="250">
<DataGrid x:Name="bnumDataGrid" ItemsSource="{Binding CurrentBnumsCollectionView}" MaxHeight="270"
CanUserAddRows="False" AutoGenerateColumns="False" SelectionChanged="BnumDataGridSelectionChanged"
IsReadOnly="True">
<DataGrid.Columns>
<DataGridTextColumn Header="Job ID" Width="0.75*" Binding="{Binding JobID}"/>
<DataGridTextColumn Header="Job Description" Width="3*" Binding="{Binding JobDescription}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
<StackPanel x:Name="searchGrid" Grid.Row="1" Grid.Column="5">
<Label Content="Search (ID)" HorizontalAlignment="Left" Margin="5,5,0,5" VerticalAlignment="Center" FontSize="20" FontWeight="Bold"/>
<TextBox x:Name="searchBox" TextWrapping="Wrap" Margin="20,5" FontSize="14" VerticalAlignment="Center" TextChanged="CallSearchBoxFilter"/>
<Label Content="Press Esc to clear filter" Margin="5,10,5,5" FontSize="14"/>
</StackPanel>
</Grid>
Understandably there is a lot of irrelevant code included there but I didn't want to miss something out that I am not seeing have an effect. The overall layout is a NavigationFrame located inside a Page that is located inside a Window so that I can navigate through pages on my program.
On this specific page there is a Grid with two rows, one containing a DataGrid and one containing the elements in the images above. I am unsure on whether it is the parent Grid causing the issues but thought I would post this first just in case there any "obvious" issues with my layout.
Here is something that I think should give you an idea on how to place items on your screen.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="5" Grid.RowSpan="6" Fill="Red"/>
<TextBlock Text="Reference:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBlock Text="Description:" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" />
<TextBox Grid.Column="1" Grid.Row="1" />
<TextBox Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="5" Text="Mahoosive Text Box" />
<ComboBox Grid.Column="4"/>
<ComboBox Grid.Column="4" Grid.Row="1"/>
<Button Content="Save New Job" Grid.Column="4" Margin="5" Grid.Row="2" />
<DataGrid Grid.Column="5" Grid.RowSpan="7">
<DataGrid.Columns>
<DataGridTextColumn Header="Job ID"/>
</DataGrid.Columns>
</DataGrid>
<TextBlock Grid.Column="6" Text="Search (ID)"/>
<TextBox Grid.Column="6" Grid.Row="1" TextWrapping="Wrap" Text="TextBox"/>
</Grid>
As we spoke in comments this is what I meant.
Create a test UserControl, paste my code and watch it resize in the designer.
For adoptive redesigning you have go with panel approach. You to add some stack panels and wrap panels to do so. You have to avoid the MARGIN thing and height and width to panels. Well its not an easy topic to close it in one answer.
I can redesign the whole panel for you in 30 to 40 minutes. It would be adoptive then, but i have to use your Team Viewer account and do it in your PC. I have paste the code in my application, but there are a lot of errors and errors. let me know, if you want me to redesign it.
I have 2 textblocks on my form. I need to have vertical scrollbars in each of them. Due to some reason, I am not able to get the scrollbars on both. Kindly provide me with some idea.
<Grid>
<Button Content="COMPARE" HorizontalAlignment="Left" Margin="216,30,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBox x:Name="TextBox1" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,69,0,0" TextWrapping="Wrap" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBox1_Loaded" />
<ScrollViewer>
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="10,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBlock1_Loaded" />
</ScrollViewer>
<TextBox x:Name="TextBox2" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" Margin="258,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBox2_Loaded"/>
<ScrollViewer>
<TextBlock x:Name="TextBlock2" HorizontalAlignment="Left" Margin="258,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBlock2_Loaded_1"/>
</ScrollViewer>
<Button Content="EDIT" HorizontalAlignment="Left" Margin="409,30,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content="HOME" HorizontalAlignment="Left" Margin="21,26,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.23,0.986" Click="Button_Click_2"/>
</Grid>
Try to check this out:
1. XAML Code:
<ScrollViewer Grid.Column="0" Grid.Row="0">
<TextBlock x:Name="ATextBlock" ></TextBlock></ScrollViewer>
<ScrollViewer Grid.Row="0" Grid.Column="1" >
<TextBlock x:Name="BtTextBlock" ></TextBlock></ScrollViewer>
the problem was; the Height definition on the TextBlock. Just remove it and that is.
regards.,
To show vertical scroll bar on a TextBox when needed you can use this XAML
<TextBox .... VerticalScrollBarVisibility="Auto" />
ScrollBar will apear when text does not fit the original space given to controll.
I made a product page but the scrollviewer does not show everything that is in that grid. I have a feeling that is has something to do with my row definitions I hope someone can help me
XAML:
<Page
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="729.552">
<Page.Resources>
</Page.Resources>
<Grid x:Name="LayoutRoot" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData2.xaml}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<!--TODO: Content should be placed within the following grid-->
<Grid x:Name="ContentPanel" HorizontalAlignment="Left" VerticalAlignment="Top">
<Pivot x:Name="ProductHub" HorizontalAlignment="Left" VerticalAlignment="Top">
<PivotItem x:Name="ProductPivot" Header="Item" DataContext="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="680">
<ScrollViewer Width="336" Height="670" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid x:Name="ContentGrid" Height="auto" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="278"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="auto" MinHeight="251"/>
<RowDefinition Height="77*"/>
<RowDefinition Height="34*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="TBlockTitle" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding result.item.title}" VerticalAlignment="Top" Height="20" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
<Image x:Name="ImageProduct" HorizontalAlignment="Left" Height="160" Margin="10,49,0,0" VerticalAlignment="Top" Width="316" Stretch="Fill" Source="{Binding result.item.images.Item330}" Tapped="ImgProduct_Click" />
<TextBlock x:Name="BtnFavorite" HorizontalAlignment="Left" Margin="10,214,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" FontSize="20" Height="20" Width="20" />
<TextBlock x:Name="TBlockHiddenSEO" HorizontalAlignment="Left" Margin="298,10,-6,0" TextWrapping="Wrap" Text="{Binding result.item.seo_name}" VerticalAlignment="Top" Opacity="0" Height="40" Width="44"/>
<TextBlock x:Name="textBlockCurrency" HorizontalAlignment="Left" Margin="192,218,0,0" TextWrapping="Wrap" Text="{Binding result.item.currency_symbol}" VerticalAlignment="Top" Height="20" Width="8"/>
<TextBlock x:Name="textBlockPrice" HorizontalAlignment="Left" Margin="205,218,0,0" TextWrapping="Wrap" Text="{Binding result.item.price}" VerticalAlignment="Top" Height="20" Width="28"/>
<TextBlock x:Name="textBlockLookAmmount" HorizontalAlignment="Left" Margin="10,258,0,0" TextWrapping="Wrap" Text="{Binding result.item.views}" VerticalAlignment="Top" Height="20" Width="16" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
<TextBlock x:Name="textBlockWatchedText" HorizontalAlignment="Left" Margin="31,258,0,0" TextWrapping="Wrap" Text="x bekeken sinds" VerticalAlignment="Top" Height="20" Width="105"/>
<TextBlock x:Name="textBlockDate" HorizontalAlignment="Left" Margin="141,258,0,0" TextWrapping="Wrap" Text="{Binding result.item.placed}" VerticalAlignment="Top" Height="20" Width="81" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
<StackPanel x:Name="StPanelUser" Grid.Row="1" Margin="0,10,0,20"/>
<TextBlock x:Name="textBlockDescription" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding result.item.description}" VerticalAlignment="Top" Width="316" Grid.Row="1"/>
<TextBlock x:Name="textBlockShipping" HorizontalAlignment="Left" Margin="10,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Shipping" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockState" HorizontalAlignment="Left" Margin="10,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="State" VerticalAlignment="Top" Height="20" Width="59"/>
</Grid>
</ScrollViewer>
</PivotItem>
</Pivot>
</Grid>
<ProgressRing HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="ProgressRing"/>
</Grid>
Thank you
I'm pretty sure, that the parent element of your scrollviewer has a smaller height than the scrollviewer itself - the height of the scrollviewer sets the height of the control, not the heigh of the content...
As consequence, if the scrollviewer is 200px greater than the parent control - the last 200px of the scrollviewer are cut off
Remove Height="670" in the ScrollViewer. If you set the height for a ScrollViewer, then it displays the controls that fits in the given height
<ScrollViewer Width="336" HorizontalAlignment="Left" VerticalAlignment="Top" >
....
....
</ScrollViewer>
.
<Window x:Class="minimizeApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid >
<ScrollViewer Width="336" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid x:Name="ContentGrid" Height="auto" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="278"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="auto" MinHeight="251"/>
<RowDefinition Height="77*"/>
<RowDefinition Height="34*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="TBlockTitle" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="title" VerticalAlignment="Top" Height="20" />
<Image x:Name="ImageProduct" HorizontalAlignment="Left" Height="160" Margin="10,49,0,0" VerticalAlignment="Top" Width="316" Stretch="Fill" Source="Images/graph1.jpg" />
<TextBlock x:Name="BtnFavorite" HorizontalAlignment="Left" Margin="10,214,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" FontSize="20" Height="20" Width="20" />
<TextBlock x:Name="TBlockHiddenSEO" HorizontalAlignment="Left" Margin="298,10,-6,0" TextWrapping="Wrap" Text="name" VerticalAlignment="Top" Opacity="0" Height="40" Width="44"/>
<TextBlock x:Name="textBlockCurrency" HorizontalAlignment="Left" Margin="192,218,0,0" TextWrapping="Wrap" Text="currency" VerticalAlignment="Top" Height="20" Width="8"/>
<TextBlock x:Name="textBlockPrice" HorizontalAlignment="Left" Margin="205,218,0,0" TextWrapping="Wrap" Text="price" VerticalAlignment="Top" Height="20" Width="28"/>
<TextBlock x:Name="textBlockLookAmmount" HorizontalAlignment="Left" Margin="10,258,0,0" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="16" />
<TextBlock x:Name="textBlockWatchedText" HorizontalAlignment="Left" Margin="31,258,0,0" TextWrapping="Wrap" Text="x bekeken sinds" VerticalAlignment="Top" Height="20" Width="105"/>
<TextBlock x:Name="textBlockDate" HorizontalAlignment="Left" Margin="141,258,0,0" TextWrapping="Wrap" Text="placed" VerticalAlignment="Top" Height="20" Width="81" />
<StackPanel x:Name="StPanelUser" Grid.Row="1" Margin="0,10,0,20"/>
<TextBlock x:Name="textBlockDescription" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="description" VerticalAlignment="Top" Width="316" Grid.Row="1"/>
<TextBlock x:Name="textBlockShipping" HorizontalAlignment="Left" Margin="10,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Shipping" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockState" HorizontalAlignment="Left" Margin="10,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="State" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockpayment" HorizontalAlignment="Left" Margin="10,51,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Payment" VerticalAlignment="Top" Height="20" Width="72"/>
<TextBlock x:Name="textBlockType" HorizontalAlignment="Left" Margin="10,76,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Type" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockRole" HorizontalAlignment="Left" Margin="10,101,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Role" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockShipping_FillIn" HorizontalAlignment="Left" Margin="141,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockState_FillIn" HorizontalAlignment="Left" Margin="141,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockpayment_FillIn" HorizontalAlignment="Left" Margin="141,51,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockType_FillIn" HorizontalAlignment="Left" Margin="141,76,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockRole_FillIn" HorizontalAlignment="Left" Margin="141,101,0,0" Grid.Row="2" TextWrapping="Wrap" Text="1323" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockAdvertiser" HorizontalAlignment="Left" Margin="10,149,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Adverteerder" VerticalAlignment="Top" Height="20" Width="87"/>
<TextBlock x:Name="textBlockLocation" HorizontalAlignment="Left" Margin="10,174,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Locatie" VerticalAlignment="Top" Height="20" Width="87"/>
<TextBlock x:Name="textBlockPhone" HorizontalAlignment="Left" Margin="10,231,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Telefoon" VerticalAlignment="Top" Height="20" Width="87"/>
<TextBlock x:Name="textBlockAdvertiser_FillIn" HorizontalAlignment="Left" Margin="141,149,0,0" Grid.Row="2" TextWrapping="Wrap" Text="name" VerticalAlignment="Top" Height="20" Width="37"/>
<TextBlock x:Name="textBlockLocation_FillIn" HorizontalAlignment="Left" Margin="141,174,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="8"/>
<TextBlock x:Name="textBlockProvince_FillIn" HorizontalAlignment="Left" Margin="141,199,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockPhone_FillIn" HorizontalAlignment="Left" Margin="141,231,0,0" Grid.Row="2" TextWrapping="Wrap" Text="phone" VerticalAlignment="Top" Height="20"/>
</Grid>
</ScrollViewer>
</Grid>
</Window>
It's a very stupid question :)
Which property sets vertical scroll?
Developing Windows Phone 7 app, I switched off this property, and I don't understand, how I did it :)
I use ComboBox, and when I create project, I can scroll text in ComboBox, but now I can't
You need to include all the items inside the Scrollviewer, as in pivot page, we can't make the content scroller without scroll viewer.
Here is the sample content.
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="647" Margin="0" Grid.Row="1">
<Grid x:Name="ContentPanel" Margin="0,0,0,24" Width="480" Height="1470" Grid.Row="1">
<Image x:Name="ImgProcess" Source="/GoogTaxi;component/images/loading2.jpg" Visibility="Collapsed" Stretch="None" Opacity="0.60" VerticalAlignment="Top" />
<TextBlock x:Name="tbkCompanyName" TextWrapping="Wrap" Text="Company Name" Margin="20,20,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtCompanyName" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,47,8,0"/>
<TextBlock x:Name="tbkAddress" TextWrapping="Wrap" Text="Address" Margin="20,120,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtAddress" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,147,8,336" VerticalScrollBarVisibility="Auto" Height="131"/>
<TextBlock x:Name="tbkEmailId" TextWrapping="Wrap" Text="Email Id" Margin="20,279,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtEmailId" IsEnabled="False" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,306,8,0" d:LayoutOverrides="VerticalAlignment"/>
<TextBlock x:Name="tbkWebsite" TextWrapping="Wrap" Margin="20,379,0,0" VerticalAlignment="Top"><Run Text="Website"/><LineBreak/><Run/></TextBlock>
<TextBox x:Name="txtWebsite" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,406,8,0" d:LayoutOverrides="VerticalAlignment"/>
<TextBlock x:Name="tbkPhone" TextWrapping="Wrap" Text="Phone" Margin="20,479,0,0" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment"/>
<TextBox x:Name="txtPhone" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,506,8,0"/>
<TextBlock x:Name="tbkCity" TextWrapping="Wrap" Margin="20,579,0,0" VerticalAlignment="Top" Text="City"/>
<TextBox x:Name="txtCity" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,606,8,0"/>
<TextBlock x:Name="tbkState" TextWrapping="Wrap" Text="State" Margin="20,676,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtState" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,704,8,0"/>
<TextBlock x:Name="tblCountry" TextWrapping="Wrap" Text="Country" Margin="20,780,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtCountry" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,806,8,0"/>
<TextBlock x:Name="tbkCompany_logo" Visibility="Collapsed" TextWrapping="Wrap" Text="Contact Person" Margin="20,0,0,42.602" VerticalAlignment="Top" d:IsHidden="True"/>
<TextBox x:Name="txtCompany_logo" Visibility="Collapsed" TextWrapping="Wrap" Margin="8,0,8,-29.305" VerticalAlignment="Top" d:IsHidden="True"/>
<TextBlock x:Name="tbkContactPerson" TextWrapping="Wrap" Text="Contact Person" Margin="20,879,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtContactPerson" TextWrapping="Wrap" Margin="8,908,8,0" VerticalAlignment="Top"/>
<TextBlock x:Name="tbkContactPhone" TextWrapping="Wrap" Text="Contact Person Phone" Margin="20,982,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtContactPhone" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,1005,8,0"/>
<TextBlock x:Name="tbkContactEmail" TextWrapping="Wrap" Text="Contact person Email ID" Margin="20,1079,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtContactEmail" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,1106,8,0"/>
<TextBlock x:Name="tbkMerchantId" TextWrapping="Wrap" Text="Google Merchant Id" Margin="20,1180,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtMerchantId" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,1209,8,0" IsEnabled="False" />
<TextBlock x:Name="tbkMerchantKey" TextWrapping="Wrap" Text="Google Merchant Key" Margin="20,1282,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="txtMerchantKey" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,1310,8,0" IsEnabled="False" />
<Button x:Name="btnsave" Content="Save" Margin="33,1390,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Click="btnsave_Click" />
<Button x:Name="btnCancel" Content="Cancel" Margin="0,1390,33,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="HorizontalAlignment" Click="btnCancel_Click" />
</Grid>
</ScrollViewer>
There is no scroll functionality inside PivotItem. You should use ScrollViewer control to get it by your own.
In a pivot control, if the content is overflowing the vertical page then there should be default "vertical" scrolling available to you.
I had a similar control with "list box" bounded to property. Having the list box should automatically allow you to scroll.
Don't add a scrollviewer over the stack panel as it would make the scrolling enabled for each list item which you don't want.
<controls:PivotItem Header="all authors" Foreground="#FF0C388A">
<Grid>
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding AllAuthorsList}" Foreground="#FF0C388A">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="Auto">
<TextBlock Tap="TextBlockAuthor_Tap" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="#FF0C388A"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PivotItem>
In my Windows phone7 silverlight Application I have several textblock pairs to display some dynamic data in run time.
For example
Name: TextBlock[Dynamically_loading_Name] <-----------------(A)
Address: TextBlock[Dynamically_loading_Asddress] <--------------(B)
Phone: TextBlock[Dynamically_loading_Phone] <-----------------(C)
Since I don't know how long the dynamic data, to The textBlocks(A, B, C), I have gave properties Height=Auto and TextWrapping=Wrap.
The problem is when data loaded to the A,B,C textBlocks they are overlapping.If I can give the margin to relative to the other textBlock I think it will be ok. By dafault margin to counts from the top of the page.
I added StackPanels to each row and Gave stackPanel height property=Auto Also. Still it overlaps when the upper record is too lengthy.
If Someone can help me to overcome this issue it a big help. Thanks
Edits................................................................
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,20,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="441">
<TextBlock Height="30" Name="txt_Title" Text="Title:" Width="90" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Height="Auto" Name="item_Title" Text="TextBlock" Width="330" TextWrapping="Wrap" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,83,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="441">
<TextBlock Height="30" Name="txt_Link" Text="Link:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_Link" Text="TextBlock" Width="306" TextWrapping="Wrap" Padding="0" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Right" Margin="0,146,8,0" Name="stackPanel3" VerticalAlignment="Top" Width="439">
<TextBlock Height="30" Name="txt_Description" Text="Description:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_Description" Text="TextBlock" TextWrapping="Wrap" Width="305" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,209,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="439">
<TextBlock Height="30" Name="txt_Comment" Text="Comment:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_Comment" Text="TextBlock" TextWrapping="Wrap" Width="305" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="6,272,0,0" Name="stackPanel5" VerticalAlignment="Top" Width="444">
<TextBlock Height="30" Name="txt_PubDate" Text="Published_Date:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_PubDate" Text="TextBlock" TextWrapping="Wrap" Width="307" />
</StackPanel>
<StackPanel HorizontalAlignment="Left" Margin="6,335,0,239" Name="stackPanel6" Width="444">
<TextBlock Height="30" Name="txt_Creator" Text="Creator: " HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_creator" Text="TextBlock" TextWrapping="Wrap" Width="305" />
</StackPanel>
</Grid>
I think all you need is a Grid. Just need to make the Heights auto sized. Also, you might want to always apply a style to your TextBlock to have consistant margins.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txt_Title" Text="Title:" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Title" Text="This is a very long title and I have no idea how long it will be" TextWrapping="Wrap" Grid.Column="1" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Link" Text="Link:" d:LayoutOverrides="Width" Grid.Row="1" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Link" Text="This could be long too..." TextWrapping="Wrap" Padding="0" Grid.Column="1" Grid.Row="1" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Description" Text="Description:" Grid.Row="2" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Description" Text="This will be very very very very very very very very very very very very very very very very very very long..." TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Comment" Text="Comment:" Grid.Row="3" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Comment" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="3" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_PubDate" Text="Published_Date:" Grid.Row="4" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_PubDate" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="4" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Creator" Text="Creator: " Grid.Row="5" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_creator" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="5" Style="{StaticResource PhoneTextNormalStyle}" />
</Grid>
See if this forum post can help you out. Basically try setting MaxWidth property of the stackpanel if everything else fails ;)
http://forums.silverlight.net/t/58227.aspx/1?Why+TextBlock+doesn+t+wrap+even+I+set+TextWrapping+to+Wrap+
Hope this helps.
I wouldn't use one grid cell and several margins for all items. If you use a StackPanel instead of the Grid, the arrangement should be fine.
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
</StackPanel>
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
Edit:
I made a sample project which looks good for me, but I'm not sure if I really got your problem. The first title does not wrap as it has a fixed height, but the second does as the height isn't set. All Stackpanels adjust their sizes as they should.
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Height="30" Width="90" TextWrapping="Wrap" Text="Title does not wrap" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Width="330" TextWrapping="Wrap" Text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Width="90" TextWrapping="Wrap" Text="Title wraps" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Width="330" TextWrapping="Wrap" Text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" />
</StackPanel>
</StackPanel>