I want to create a custom control named DetailRegion that accepts a collection of child controls. From there I want layout the controls in a manner of my choosing. For example...
<localControls:DetailRegion>
<TextBlock Text="Occupation:" Style="{StaticResource Label}" />
<TextBlock Text="{Binding Occupation}" Style="{StaticResource Value}" />
</localControls:DetailRegion>
... may be rendered as a grid with two columns or a stack panel depending on screen width.
I'm not asking for a complete solution, I just need tutorial to get me started.
Msdn have also good sample, where custom panel creation is described.
Related
My application UI use Tab control.
One of the tab has 20 groupboxes (in scrollviwer), and each groupbox contents 300 textbox with a name (label) above the textbox (not one on one match).
When the app running (not yet), each textbox will display a byte value from the buffer.
I am manually drawing this groupbox, it is too much work. I am trying use itemcontrol to draw the textboxes, but don't know how to make a new line since there are name-value pair.
Any solution will be appreciated.
You would use an ItemControl with a DataTemplate, where the DataTemplate represents one key-value pair.
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Hi I am a label" />
<TextBox />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a page in my WP7 app consisting of a TextBox beside a ListPicker. In their default modes, they don't line up properly; the ListPicker has a different padding to the TextBox, and its height is also different.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<toolkit:ListPicker Width="170" ItemsSource="{Binding l}" Style="{StaticResource ListPickerStyle1}" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
Manually tweaking the ListPicker's template to fit in correctly here is tricky and error prone. For example, when its height is adjusted, the caption (i.e. the text of the selected item) is no longer in the centre of the component.
My app is currently failing MS app review because the components are not all the same height.
Is there an easy way for me to set the toolkit:ListPicker to have the same appearance as a TextBox?
The simplest solution will be to take a copy of the the default style and tweak that using Blend to be exactly how you want it to look. This will take a little trial and error to sort out.
You can then use the implicit styling rules to apply it to all ListPickers without having to explicitly set the style on each instance:
<Style x:Key="MyListPickerStyle
TargetType="toolkit:ListPicker>
.... your tweaks here
</Style>
<Style TargetType="toolkit:ListPicker"
BasedOn="{StaticResource MyListPickerStyle}" />
It may be easier to tweak the TextBox Style of course :)
I have a UserControl that I have successfully been using as a header for presentations that involve a list which can be headered, using the xaml below:
<DockPanel >
<uc:ListSubjectHeader Subject="{Binding DisplayName}"
AddNewItemCommand="{Binding AddCommand}"
ImageSource="..." />
<!-- other controls -->
</DockPanel>
I would like to use this same control in another presentation where it would be the content for the header in a HeaderedContentControl, and came up with this xaml to do that:
<HeaderedContentControl Content="{Binding Path=DetailViewDepartment}" >
<HeaderedContentControl.HeaderTemplate>
<DataTemplate DataType="{x:Type vm:DepartmentSelectionViewModel}">
<uc:ListSubjectHeader Subject="{Binding DisplayName}" ... />
</DataTemplate>
</HeaderedContentControl.HeaderTemplate>
</HeaderedContentControl>
The visual elements show up the way I want them to, but data does not. I should note that I am using the same view model (vm:DepartmentSelectionViewModel) in a different control's DataTemplate in the same presentation, which I asked as a different question here. If you know the answer to this one you likely know the answer to that one too.
How can I fix this?
Cheers,
Berryl
The HeaderTemplate applies to the object in the Header property, not Content. Content uses the ContentTemplate, just like in the normal ContentControl.
If I have a ChildWindow in Silverlight I can apply the FontSizeProperty and it is inherited by child items.
<controls:ChildWindow FontSize="14">
<StackPanel>
<TextBlock Content="Hello">
<TextBlock Content="World">
</StackPanel>
</controls:ChildWindow>
Now that's fine if you want the whole page to have the same font size, but I want to do something like this and have inheritance in smaller blocks:
<controls:ChildWindow>
<StackPanel FontSize="14">
<TextBlock Content="Hello">
<TextBlock Content="World">
</StackPanel>
<StackPanel FontSize="10">
<TextBlock Content="Hello">
<TextBlock Content="World">
</StackPanel>
</controls:ChildWindow>
This doesn't compile. Is there any way i can achieve this pattern in Silverlight without having to define a style for StackPanel (I think that would work).
Are there any other containers that let me set FontSize for its descendants - or can I write one that would?
I want to easily set fontsize to be larger for certain StackPanels. I don't want to resort to styles because its very specialized and I won't need to reuse the style elsewhere.
Whats the best way to do this?
You can wrap each StackPanel in a ContentControl, which does implement FontSize.
I want to make buttons similar to those on this website.
Lets say that the object I'm working with is ArtPiece, and has a Title and Date. I want both of those to show up on my buttons in two different TextBlocks.
I've been trying to modify the button's ContentTemplate, then modifying the button's ContentPresenter inside the ContentTemplate, but I still can't get the TextBlocks to bind.
Any help getting this done entirely in XAML? I'm using Expression 3.
You want to do something like this:
<Button Click="Button_Click" Name="button" >
<Button.ContentTemplate>
<DataTemplate>
<StackPanel Background="Yellow" Width="200" Height="200">
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Date}" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
It sounds like what you really want is some sort of multi-binding support to bind these two properties to one Content property on the button. As far as I know there is no built in multi-binding support in silverlight as there is in WPF. This article outlines one approach to implementing it in silverlight.
If you were using the MVVM pattern a much easier approach would be to create another property in your ViewModel which concatenated the two strings together and then you could just bind the Content of the button to that single new property. This would be a much simpler and cleaner approach in my opinion.