Develop Reference

Multible bindings to a header text.

I am using uwp community toolkits expander and I am having problems bindings multiple values to the header text. Is this even possible ?
<ListView x:Name="LV" ItemsSource="{Binding VaccSingelton.VaccOverblikListe}" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectionChanged="LV_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<controls:Expander x:Name="Expander1" Margin="0,0,0,10"
Header="{Binding Name}" IsExpanded="false" >
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" Text="Antal Stik:" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding Stik}" Grid.Column="1" Margin="10,0,0,0">
</TextBlock>
<TextBlock FontWeight="Bold" Text="Udføres på:" Grid.Column="0" Grid.Row="1"></TextBlock>
<TextBlock Text="{Binding Udførsel}" Grid.Column="1" Grid.Row="1" Margin="10,0,0,0"></TextBlock>
<TextBlock FontWeight="Bold" Text="Bivirkninger:" Grid.Column="0" Grid.Row="2"></TextBlock>
<TextBlock Text="{Binding Bivirkninger}" Grid.Column="1" Grid.Row="2" Margin="10,0,0,0"></TextBlock>
<TextBlock FontWeight="Bold" Text="Information:" Grid.Column="0" Grid.Row="3"></TextBlock>
<TextBlock Text="{Binding Info}" Grid.Column="1" Grid.Row="3" Margin="10,0,0,0"></TextBlock>
<TextBlock FontWeight="Bold" Text="Dato:" Grid.Column="0" Grid.Row="4"></TextBlock>
<TextBlock x:Name="test" Grid.Column="1" Grid.Row="4" Margin="10,0,0,0">
<Run Text="{Binding OpretVaccDatoText}"></Run>
</TextBlock>
</Grid>
</controls:Expander>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just to make it more clear, I want to add more bindings to the header inside of:
<controls:Expander x:Name="Expander1" Margin="0,0,0,10"
Header="{Binding Name}" IsExpanded="false" >
So should possibly look like this:
<controls:Expander x:Name="Expander1" Margin="0,0,0,10"
Header="{Binding Name, address, Email}" IsExpanded="false" >

Ideally, I'd recommend just having a property in your viewmodel with what you want to show (I assume the three properties concatenated), but you can also use compiled bindings (x:Bind) for that as it supports functions.
It does, however, require that your app's minimum target SDK version is 14393 or later!

Resolution Problems C# WPF

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.

How to prevent textblock to overlapping?

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.

How to style toolkit:ListPicker full mode in wp8

I am having problem styling the full mode of listpicker. I want it should fully cover the page but I see a margin from the left and up in full mode.
<toolkit:ListPicker Header="SELECT TRANSLATION" x:Name="lspTranslationLang"
SelectedItem="{Binding Name, Mode=TwoWay}" SelectionChanged="lspTranslationLang_SelectionChanged">
<toolkit:ListPicker.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock FontWeight="Bold" Foreground="Black" Text="Select Translation"></TextBlock>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.HeaderTemplate>
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock FontSize="30" Text="{Binding Language}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Margin="10,0,0,0" Width="30" Height="30" Grid.Column="0" Source="{Binding ImagePath}" ></Image>
<TextBlock Grid.Row="0" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Language}" FontSize="30"/>
<TextBlock Grid.Row="1" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Description}" FontSize="30"/>
<Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
How I can change the style for full mode of listpicker?

Check out this tutorial for customizing list picker from geekchamp.
Customizing list picker
Change the data template of the full mode property. And set the margins using expression blend. It is a good editor in customizing.

You must probably add the following property
ExpansionMode="FullScreenOnly"

Access and modify properties of grid row within data template

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?]