How to clone UIElement in Silverlight - c#-4.0

Can anybody tell me how to clone UIElement in SILVERLIGHT ?. I dug a lot in the google but I'm not able to find relevant solution, everywhere I'm just getting solution to clone UIElement in WPF, however same is not applicable in the Silverlight.
I need to add the a UIElement in the same grid's next rows on click of a + button eachtime.
Plz help..any answer will be appreciable
Thanks
GK

There is no facility to do that.
In your scenario you can use an ItemsControl (directly or as a ListBox, for example) and provide your to-be-duplicated piece of UI as a datatemplate:
<ItemsControl ItemsSource="{Binding MyData}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding LabelText}" />
</Grid>
<DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is the most typical way of doing it, but you will need to know about databinding to do it.
There is also the possibility of factoring out your to-be-duplicated piece of UI in a UserControl and add that programmatically multiple times.

Related

Catel wraps usercontrol content in viewmodel grid even when naming content grid "__catelInnerWrapper"

I'm having a problem creating a viewmodel grid manually in Catel for a Catel usercontrol. The documentation implies that by naming the content grid "__catelInnerWrapper" that the content will not be wrapped with another grid by the ViewModelWrapperService and will use my grid instead. I'd like to do so for visual state management purposes. Using Snoopwpf I can see that the usercontrol is still being wrapped.
(https://i.imgur.com/teSu9La.png)
I tried creating a new Catel project template using Catel 5.8.0 and also 5.9.0 beta 0 using .NET 4.6.1 with a single usercontrol in the mainwindow to test a simplified application and saw the same behavior.
<catel:UserControl x:Class="CatelTest.Views.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:catel="http://schemas.catelproject.com">
<Grid x:Name="__catelInnerWrapper">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="{Binding Title}" />
<Label Grid.Row="1" Content="My User Control" />
</Grid>
</catel:UserControl>
In stepping through ViewModelWrappingService.xaml.cs code it seems the usercontrol content Name property is always resolving to null and thus isn't matched with the InnerWrapperName. Do you know why this might be happening? Thank you
When looking at the source, you are doing the correct thing. If you are 100% sure that:
You are using a correct build (e.g. fully rebuilt app, not a
wrong configuration)
Snoop is correct
Then please report an issue (with minimal repro) at https://github.com/catel/catel/ and we will make sure it will be fixed in Catel 5.9 (currently in beta, about to be released but we will wait for this one).

Any idea to create masked text box in uwp

Currently I got a requirement to implement a control something like traditional masked text box. But unfortunately there is no first party control (some third party paid control is available like Component 1) available in uwp. If anybody has any idea to create the same please share.
You can make a TextBox background transparent and have a TextBlock behind it with your watermark text. Bind the visibility to the TextBox Text.IsEmpty property using a BooleanToVisibilityConverter
<Grid Grid.Row="0" Margin="5" Background="White">
<TextBlock VerticalAlignment="Center" Margin="3"
Foreground="SteelBlue"
Visibility="{Binding ElementName=MyTextBox, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}">Type in here...</TextBlock>
<TextBox Background="Transparent"
x:Name="MyTextBox"/>
</Grid>
In your resources:
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
Have a look at PlaceHolderText Property on TextBox control.

How to display all the elements on the same point using ItemsControl wpf

I want to disply all my elipse in the same point using itemControl wpf. by default itemsControl use vertical stackpanel. there's a way to simply remove the StackPanel?
Thanks
Sure, you can give a custom ItemsPanel by either set one in your ItemsControl ControlTemplate, and using the IsItemsHost property to tell which of the panels is the receiver of the items.
<ItemsControl.Template>
<ControlTemplate>
<Canvas IsItemsHost="True"/>
</ControlTemplate>
</ItemsControl.Template>
or by supplying a custom ItemsPanel and telling the position in the template by an ItemsPresenter.
<ItemsControl.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

'ToolTip' cannot have a logical or visual parent

I have the following problem. I keep getting 'ToolTip' cannot have a logical or visual parent error when i try to style tooltip for the toggle button. What went wrong? When i take out the tooltip control under ToggleButton.ToolTip it works !
<ToggleButton x:Name="toggle" OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" Margin="0,4,0,0" VerticalAlignment="Top" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.ToolTip>
<ToolTip Style="{StaticResource tooltipstyle}">
<TextBlock Background="Transparent"/>
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
If you write code like this using property element syntax, you call already the constructor of the ToolTip class.
<ToggleButton.ToolTip>
<TextBlock></TextBlock>
</ToggleButton.ToolTip>
There is no need to instantiate another ToolTip inside like this...
<ToggleButton.ToolTip>
<ToolTip Style="{StaticResource tooltipstyle}">
<TextBlock Background="Transparent"/>
</ToolTip>
</ToggleButton.ToolTip>
Besides, on my system (using .NET 4.5) there is no error.
It seems that WPF can handle both versions meanwhile as intended by the developer.

Silverlight / WPF Custom Control Template Help

I'm hoping to create a control that I call an "AutoCompleteListBox". If you've ever used hotmail to send an e-mail the way the to: address line works is what I wish to create. You have what looks like an input box and as you type you get a dropdown of matching objects. Once you select an object (contact) it is added into the input box as a rectangular object. Multiple objects can be added this way and the input box acts like a wrap panel. You can delete objects by backspacing them or clicking the x button on each.
My approach was to begin by subclassing ItemsControl. I've started to write its control template which is basically a wrap panel that I want to show the bound items + a text box. I don't know how to get both the bound items and the textbox to be in the same wrap panel. Here's what I have:
<Style TargetType="ctrl:AutoCompleteListBox">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctrl:AutoCompleteListBox">
<ScrollViewer x:Name="RootScrollViewer" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Padding="0" Background="{TemplateBinding Background}">
<toolkit:WrapPanel IsItemsHost="True">
<!--Items Bound To ItemSource Go Here-->
<TextBox x:Name="txtInput"/>
</toolkit:WrapPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I don't know how to express what I want. I know you can use an "ItemsPresenter" in the control template which does show the bound items but then how can I add my textbox into the same panel as the bound items?
I'd greatly appreciate any help. Is this the right way to even go about it? Thanks very much.
Subclassing the items control is a good start, but I think the controltemplate should be setup a bit different. The Silverlight toolkit contains an excellent autocomplete box that you can use for this exact purpose. Combine this with a separate items control and you should have something that can be styled to look exactly like the live mail "To" field.
<ControlTemplate>
<toolkit:WrapPanel>
<ItemsControl ItemsSource="{TemplateBinding Items}">
<ItemsControl.ItemsPanel>
<StackPanel Orientation="Horizontal"/>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<!-- Add data template for the previously added items here -->
</ItemsControl.ItemTemplate>
</ItemsControl>
<toolkit:AutoCompleteBox ItemsSource="{TemplateBinding AutoCompleteItems}" />
</toolkit:WrapPanel>
</ControlTemplate>

Resources