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.
Related
I am currently developing an application for Windows Embedded Handheld 8.1 and have run into an issue where I have a dynamically expanding grid inside a gridview. My problem is that since this application runs on handheld devices I have a very limited space to use on every row.
What I would like to do is to just show general information on each row and then when a row is tapped or selected in the device, I would like to somehow expand that specific row and show some more detailed information, this seems to be problematic however since as soon as I start messing with a specific rows height, every other row in the ItemTemplate naturally also grows, leaving a lot of blank spaces in the grid.
Normally I would have used a DataGrid and DataGrid.RowDetailsTemplate, but that control does not seem to be implemented in WEH8.1.
So my question is if someone has a solution or possibly a workaround to my problem?
Code Example on GridView Below:
<ScrollViewer Grid.Row="1" Margin="0">
<GridView x:Name="gvCustomerOrderRows">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="{Binding BackgroundColor}" Margin="0" Height="{Binding ShowSecondRowHeight}" Tapped="Grid_Tapped" Tag="{Binding kor_row}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="31.25"/>
<ColumnDefinition Width="58.75"/>
<ColumnDefinition Width="105"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding kor_pos}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="0" FontSize="14" VerticalAlignment="Center" Margin="0,17,0,16"></TextBlock>
<TextBlock Text="{Binding kor_partno}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="1" FontSize="14" VerticalAlignment="Center" Margin="0,17,0,16" Grid.ColumnSpan="2" ></TextBlock>
<TextBlock Text="{Binding kor_txt}" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" FontSize="14" VerticalAlignment="Center" MaxLines="2" TextWrapping="Wrap"/>
<TextBlock Text="{Binding kor_rqty}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="5" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" TextAlignment="Center"></TextBlock>
<TextBox x:Name="txtQuantity" Grid.Row="0" Text="{Binding rep_qty, Mode=TwoWay}" Visibility="{Binding VisibilityHideThenText}" Background="{Binding DeliverColor, Mode=TwoWay}" BorderBrush="{Binding DeliverColor, Mode=TwoWay}" InputScope="Number" TextAlignment="Right" Grid.Column="6" GotFocus="txtQuantity_GotFocus" Margin="6,10,-1,0" Height="39"/>
<TextBlock Text="{Binding kor_ldat}" Grid.Row="1" Visibility="{Binding VisibilityHideThenText}" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" VerticalAlignment="Top" HorizontalAlignment="Left" TextAlignment="Left"></TextBlock>
<TextBlock Text="Stock Loc.: " Grid.Row="1" Grid.Column="3" TextAlignment="Right" VerticalAlignment="Top" FontSize="14" Visibility="{Binding VisibilityHideThenText}"></TextBlock>
<TextBlock Grid.Row="1" Visibility="{Binding VisibilityHideThenText}" Tag="{Binding kor_row}" Grid.Column="4" Grid.ColumnSpan="2" VerticalAlignment="Top" FontWeight="Bold" FontSize="14" Tapped="TextBlock_Tapped" Margin="10,0,0,0"><Underline><Run Text="{Binding SelectedLocation, Mode=TwoWay}"/> </Underline></TextBlock>
<TextBlock Text="{Binding LocQuantity}" Grid.Row="1" Grid.Column="5" VerticalAlignment="Top" Visibility="{Binding VisibilityHideThenText}" FontSize="14" TextAlignment="Center"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
I've tried for this problem the ViewBox but for some resolution the result is strange, the font it's too large and I want maintain my fontsize so the ViewBox isn't good for this goal. This is my structure:
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="5">
<TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center">Fattore forma (casa)</TextBlock>
<Label Content="40%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"></Label>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="5" Margin="5,0">
<TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center">Fattore forma (fuori)</TextBlock>
<Label Content="35%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"></Label>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="5">
<TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center">Totali giocate</TextBlock>
<Label Content="9" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"></Label>
</StackPanel>
Now the main problem's that if I resize the window to a minimum resolution I get a text overlapping and I want avoid this, what's the best idea for do this? I'm new to wpf so I'm actually learning what's the best solution for this problems.
Image example:
New code as suggested:
<Grid Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="0">Fattore forma (casa)</TextBlock>
<Label Content="40%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Grid.Column="0" Grid.Row="1"></Label>
<TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0">Fattore forma (fuori)</TextBlock>
<Label Content="35%" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Grid.Column="1" Grid.Row="1"></Label>
<TextBlock TextDecorations="Underline" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="2" Grid.Row="0">Totali giocate</TextBlock>
<Label Content="9" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Grid.Column="2" Grid.Row="1"></Label>
</Grid>
It seems StackPanels are in Grid with Rows and Columns definitions and you didn't paste whole code.
However, you can use TextTrimming="CharacterEllipsis" in TextBlock. It will automatically add dots when text is too long.
or TextWrapping="Wrap" if you want to wrap the text into new line.
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>
I'm trying to split a button in half so that I can show text data in each half - which can also be increased in size when the application is expanded.
This is the code I've got soo far.
<Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="{Binding postcode}" />
<TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,2,0,0">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
<TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</StackPanel>
I've tried setting each StackPanel half to stretch, but they both just Float in the centre of the button, so I can't align the text on either half.
Here's a graphical representation of the button I'm trying to create...
Update:
Here is what I'm getting with the code above, sadly I'm struggling to get the text to align, or to get anything to stretch to the full width of each half:
StackPanel won't do that; it just stacks elements.
Instead, use a <Grid> with two columns.
StackPanel is not the right container for this. Try using a Grid like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
...
</StackPanel>
<StackPanel Grid.Colunn="1">
...
</StackPanel>
</Grid>
</Button>
I like to use UniformGrids, although a Grid will also work if you need to define your Rows/Columns individually
Here's an example, with correct alignments:
<UniformGrid Columns="2">
<StackPanel Background="LightBlue" >
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="12345" />
<TextBlock Margin="0,6,0,0" Text="Type" />
</StackPanel>
<StackPanel Background="Yellow">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</UniformGrid>
You might also be interested in checking out this link, which gives you a quick visual look at each of WPF's different layouts and how they act.
I have difficulty accessing a grid or its rows(within a ListBox), despite defining the grid's or row's name. I intend to set a new MaxHeight to one of its rows when some parameter is passed in from a SharePoint browsable property to the Silverlight control.
How may i achieve the desired effect? Binding perhaps?
# Page.xaml:
<ListBox ItemsSource="{Binding}" DataContext="" x:Name="NewsList" SelectionChanged="NewsList_SelectionChanged" SelectionMode="Single" Width="580" Height="360" VerticalAlignment="Top" HorizontalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Height="110" Width="540" x:Name="StaffNewsBodyHeight">
<Grid Height="110" Width="540">
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="{Binding StaffNewsBodyHeight}" />
<RowDefinition Height="15" />
</Grid.RowDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="82" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border CornerRadius="2" BorderThickness="2" BorderBrush="Gray" Height="82" Width="82" Background="LemonChiffon" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.RowSpan="3" Grid.Column="0" >
<Image Source="{Binding NewsThumbnail}" Style="{StaticResource ThumbNailPreview}" />
</Border>
<TextBlock x:Name="NewsTitle" FontFamily="Arial" FontWeight="bold" TextDecorations="Underline" Text="{Binding Title}" Style="{StaticResource TitleText}" Grid.Row="0" Grid.Column="1"/>
<TextBlock x:Name="NewsBody" FontFamily="Arial" Text="{Binding NewsBody}" Margin="5" Style="{StaticResource DescriptionBlock}" Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Margin="3,3,3,3">
<TextBlock Text="Published By:" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
<TextBlock Text="{Binding PublishedBy}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
<TextBlock Text="{Binding DatePublished}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
# Page.xaml.cs:
if (!string.IsNullOrEmpty(_setLength))
{
StaffNews test = new StaffNews();
//assign new height to gridrow of NewsBody
if (_setLength.Contains("_3"))
test.StaffNewsBodyHeight.Equals(200);
}
I believe that StaffNews is representing one item in your list, right?
In that case, to assign a value to a property, use:
test.StaffNewsBodyHeight = 200;
to replace the last line of your snippet.
[P.S. - StaffNewsBodyHeight is a dependency property defined in StaffNews, right?]