How to create tiger textbox in silverlight - silverlight

I want to add the tiger textbox for message conversation in my project, I dont know how to apply styles or controls to get the tiger textbox in silverlight.
Is any way to get the above image in silverlight code / styles

Short of creating your own custom control in silverlight, there is no way you can have a textbox shaped like that.
However, there are 2 ways you can get what you want.
1) Either add a simple Border to your textbox. Change the opacity setting according to your needs.
For example:
`<Border BorderBrush="Black" BorderThickness="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="49,33,0,0">
<TextBox Height="72" TextAlignment="Center" Name="textBox1" Text="TextBox" Width="270" Background="White" />
</Border>`
2) Place the Image of the bubble, and place a textbox inside it. You would have to change a few opacity settings, but here is an example:
<Grid HorizontalAlignment="Left" Height="96" Width="316" Margin="99,265,0,0" VerticalAlignment="Top">
<Image Name="image1" Stretch="Fill" Source="bubble.png" />
<TextBox Name="textBox2" Text="TextBox" SelectionBackground="#001BA1E2" SelectionForeground="Black" BorderBrush="Transparent" Background="Transparent" Margin="0,0,0,30" />
</Grid>
You would have to made a few adjustments with the margins based on the image you use. But basically, this is how the above 2 textboxes would look:
If You wish to create your own Control for the Tiger Textbox, you could follow these steps:
1) Open the Project in Expression Blend
2) In the position where you wish to add the textbox, Draw an image which is in the Tiger Textbox format.
3) Right Click on this Image and Select "Make into Control..."
4) Choose the TextBox.

Related

Can I place controls inside Textbox in WPF?

For example Button, Link, Image ,...
This code does not work:
<Grid>
<TextBox
HorizontalAlignment="Left"
Height="180"
Margin="38,35,0,0"
TextWrapping="Wrap"
Text="TextBox"
VerticalAlignment="Top"
Width="442"
>
<Button
Content="Button"
HorizontalAlignment="Left"
Margin="149,105,0,0"
VerticalAlignment="Top"
Width="75"
RenderTransformOrigin="-2.78,1.376"
/>
</TextBox>
</Grid>
Not without writing your own custom control. That is the proper solution.
Here is a good example of a custom control for this: https://stackoverflow.com/a/6419556/1624581
Alternatively, as a hacky and quick solution you could put the button and the textbox in a container (e.g. stackpanel or grid) and then use a negative margin on the button so that it appears within the textbox. You can then apply a padding on the right of the textbox so that the input text doesn't overlap with the button. With that said, I'd strongly recommend writing a custom control as negative margins can cause maintenance headaches in the long run.

Windows phone layer

How can I create the effect similar to Windows Phone's MessageBox, where the message gets displayed on a new layer with transparent background, so that the windows becomes modal? My layout is created out of Grid, so I do not know how to add any content over it. Please help.
It's easy to overlay one set of content with another in WPF. Try changing the visibility of the border below, for a simple message box effect. You would of course bind Visibility to your view model, or set it in code behind.
<Grid>
<Grid>
<!-- All your layout here -->
</Grid>
<Border Height="100" Width="100" Background="Azure" Visibility="Hidden">
<TextBlock Text="Hi there" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>

Why does WP7 ListPicker have different margins and height to TextBox

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 :)

WPF: Visual studio like error buttons

I want to get this.
buttons http://www.shrani.si/f/X/6Y/24Jhn9D3/buttns.png
Everything works so far, buttons act as filter and are bind to the grid control.
All i want is the icons and counter on the button.
Whats the correct way of implementing those?
<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
I have tried adding image like this:
<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
<StackPanel>
<Image Source="Resources/Warning"/>
</StackPanel>
</ToggleButton>
but i get error that prop. Content is defined more then once.
A WPF Button (or ToggleButton) is a content control, into which you can put anything.
I haven't checked, but these buttons probably have a horizontal stack panel or a DockPanel, with an Image and then one or two TextBlocks. You could make a template for these, and also use binding to set the TextBlock Text content from your viewmodel.
Snoop ( http://snoopwpf.codeplex.com/ ) is a great tool for finding out how other people have built things in WPF.
The Adam Nathan WPF book is excellent, and if you don't have it you should get it. http://www.amazon.co.uk/Windows-Presentation-Foundation-Unleashed-WPF/dp/0672328917
Here's an example:
<ToggleButton Height="24" Width="100">
<DockPanel>
<Image Source="c:\\temp\\me.jpg" Margin="3"/>
<TextBlock Text="20 Errors"/>
</DockPanel>
</ToggleButton>

Get rid of button border in WPF?

i am trying to get rid of button border and only display text, however a thin line around the text gets displayed even though i set borderThickness to 0 and borderbrush to transparent.
my xaml code for save button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0"/>
Is there anyway i can get rid of the button border?
You need to override the ControlTemplate of the Button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
</Button>
The method that I recently found to be most useful for this was to have your button use the style of a toolbars. This will only use the image or text while only showing button borders on mouse over.
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Content="save"
Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0" />
You need to create a new Template for your buttons.
The easiest way to do this is open your project in Expression Blend, select the button and then right click and select "Edit Template > Edit a Copy..". This copies the existing template into one you can modify. It's easier if you create it in a resource dictionary.
Then select the template and on the Resource tab (on the right of the UI) select the ButtonFocusVisual. Select the Properties tab and expand the Miscellaneous section. This has BorderStyle and BorderThickness fields (among others). Set the style to None.
Templates will not solve this problem, your only course of action is to modify the WPF control. The solution is here:
How to remove ButtonChrome border (when defining the template of a border)?

Resources