Silverlight Datagrid Column header Text Break Line - xaml

I am Using Silverlght 4.I have a datagrid Header whose text="StudentDetailOfAplication".Since It Occupies more length in I need to have a break line near "Application".Please send me some usefull links how to do this
<Grid x:Name="LayoutRoot" Background="White">
<sdk:DataGrid AutoGenerateColumns="False" Height="227" HorizontalAlignment="Left" Margin="39,37,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="316" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="StudenDetailsOFApplication" Width="100" Binding="{Binding id}"></sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="Name" Width="100" Binding="{Binding productName}"></sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="NumberOfAplication" Width="114" Binding="{Binding qty}"></sdk:DataGridTextColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid></Grid>

Header="Student Details
Of Application" or Header="Student Details
Of Application" will also work. Or if you're not inserting into a string you can also do something like.
<TextBlock>
Line<LineBreak/>Break
</TextBlock>
but personally I just use the codes shown in the first two examples. Also keep in mind the xml will retain whitespace, so you can do like Header=" Details of
Student Application" for alignment purposes if TextAlignment property isnt available. Hope this helps.

Related

Datagrid is glitching and rows are getting Reordered when scrolling upwards

When I run this, it gets a fairly large list of items. At first scrolling downwards has no issues at all. However when I scroll upwards it starts glitching back and forth and you can never reach the top of the DataGrid. Even more the rows start to get mixed up and no longer sit in the position they're supposed to.
<DataGrid
Grid.Row="1"
CanUserResizeColumns="True"
CanUserReorderColumns="False"
CanUserSortColumns="False"
IsReadOnly="True"
HeadersVisibility="All"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutoGenerateColumns="False"
GridLinesVisibility="All"
MaxColumnWidth="500"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
Background="{Binding Context.UniversalSettingsContext.BackgroundColor}"
Items="{Binding Context.WorkItemPanelContext.WorkItems}"
>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Allow?">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox IsThreeState="False" IsChecked="{Binding IsChecked}" HorizontalAlignment="Right"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding Id}" Header="Id" />
<DataGridTextColumn Binding="{Binding State}" Header="State" />
<DataGridTextColumn Binding="{Binding Description}" Header="Description" />
<DataGridTextColumn Binding="{Binding ReleaseNotes}" Header="Release Notes" />
</DataGrid.Columns>
</DataGrid>
The binding statement you have:
Context.WorkItemPanelContext.WorkItems
Is suggesting you have an odd structure behind your view. It needs flattening so you are databinding to WorkItems, not Context.WorkItemPanelContext.WorkItems.
Have a read of the Law of Demeter.
I would suggest having a read around MVVM as a design pattern and reorganise your data so it's a much more binding friendly and flatter than it is now.
It looks like you have one god object called Context that has absolutely everything on it which is not a good design choice.
There isn't anything in this code that suggest it should be behaving like this other than the deep binding I've mentioned.

How do I create a two column layout using xaml RelativePanel?

I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.
This is what I want
I've tried to achieve this with the following XAML:
<RelativePanel>
<TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
</TextBlock>
<TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.RightOf="FileList">
</TextBox>
<ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="Title">
</ListView>
</RelativePanel>
This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.
Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case
Your Editor control should have -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"
Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.

Highlighting around GridView items

I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.

how to assign resx resource to itemtemplate control

In my WP8 app, i have radio button where customized it through datatemplate and embedded a textblock in it. My question is how to assign a key from my resx resource file to assign text value, so that i can localize these datatemplate control names without any issues.
Below is my sample xaml:
<TextBlock x:Name="lblTileColor" TextWrapping="Wrap" Text="{Binding LocalizedResources.Themes_Tile_label, Source={StaticResource LocalizedStrings}}" />
<RadioButton x:Name="accentColor" GroupName="tileColor" IsChecked="true">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Width="25" Height="25" Fill="{StaticResource PhoneAccentBrush}"/>
<TextBlock Width="10"/>
<TextBlock x:Name="lblDefaultAccent" Text="{Binding LocalizedResources.Themes_Tile_Default, Source={StaticResource LocalizedStrings}}" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
Here i am trying to assign Themes_Tile_Default resx key to textblock named lblDefaultAccent control.
With above code i am seeing xaml error (i.e. Invalid XAML) in Datatemplate section - if i assign text value directly with hardcoding it is working...
any help to resolve this?

Unhandled Error in Silverlight Application Code: 4004 System.Collections.Generic.KeyNotFoundException

I'm getting this error in a very strange manner. I've been able to isolate it, and I know what is causing it, but I don't have a clue why.
This is the situation: I have a ChildWindow, which contains a TabControl, which contains two UserControl, and both of them contain a datagrid like this causing the unhandled error:
<sdk:DataGrid x:Name="PersonEmailDataContainer" AutoGenerateColumns="False" Height="119" HorizontalAlignment="Left" Margin="12,39,0,0" VerticalAlignment="Top" Width="736"
ItemsSource="{Binding PagedListOfPersonEmail, Mode=TwoWay}"
ColumnHeaderStyle="{StaticResource ColBinding}"
SelectedItem="{Binding SelectedPersonEmail, Mode=TwoWay}"
IsReadOnly="{Binding PersonEmailDataContainerIsReadOnly, Mode=TwoWay}">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True"
CanUserSort="True" Width="Auto" />
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True"
CanUserSort="True" Width="20*"
Binding="{Binding Email, Mode=TwoWay}"
Header="{Binding ConverterParameter=HdrEmail, Converter={StaticResource Localization}, Source={StaticResource Localization}}" />
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True"
CanUserSort="True" Width="20*"
Binding="{Binding WebSite, Mode=TwoWay}"
Header="{Binding ConverterParameter=HdrWebSite, Converter={StaticResource Localization}, Source={StaticResource Localization}}" />
</sdk:DataGrid.Columns>
<!-- more columns -->
</sdk:DataGrid>
I solved it by removing the first column, which is just a blank column. It displays no data, it has no bindings, it doesn't even have a header to display. Any ideas why this was causing the error?
If you have a DataGrid that is bound to an ItemsSource then you cannot have a sdk:DataGridTextColumn that does not have a binding. You can use the sdk:DataGridTemplateColumn instead. This column type does not require a binding.