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>
Related
I have implemented a toggle button with a popup similar to what is described here. My popup displays a user control that is basically a custom menu with several images/buttons on it. Here is the code for my toggle button:
<ToggleButton x:Name="btnMenu" Background="Transparent" HorizontalAlignment="Right">
<StackPanel>
<Image Width="60" Height="60" Margin="10,0,10,0" Source="{StaticResource icon-menu}"/>
<Popup StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=btnMenu}" Placement="Bottom">
<controls:Menu/>
</Popup>
</StackPanel>
</ToggleButton>
Everything works fine, except that when I click on a button (which is bound to a command) in my user control, I would like the popup to disappear. Is there a way, through xaml, that I can close the parent popup when a button on the user control is pressed?
I did manage to find solutions on codeproject which would most likely solve the problem, and I also found various solutions on StackOverflow where all the xaml was inside the popup instead of a separate user control. I wanted to see if there was another preferred method (hopefully xaml based) that could solve this particular problem, and still let me keep my menu in a separate user control.
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.
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>
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 Silverlight menu for my application with an image as the background. I use some empty HyperlinkButton at a specific position and size to simulate a real button on the image (think as a HTML image-map):
<HyperlinkButton x:Name="Portfolio" Width="86" Height="40" Canvas.Top="50" NavigateUri="/portfolio"/>
<HyperlinkButton x:Name="Analysis" Width="79" Height="40" Canvas.Top="50" Canvas.Left="124" NavigateUri="/analysis" BorderThickness="0"/>
<HyperlinkButton x:Name="News" Width="77" Height="40" Canvas.Top="50" Canvas.Left="240" NavigateUri="/news"/>
<HyperlinkButton x:Name="Questions" Width="80" Height="40" Canvas.Top="50" Canvas.Left="357" NavigateUri="/questions"/>
<HyperlinkButton x:Name="Companies" Width="80" Height="40" Canvas.Top="50" Canvas.Left="477" NavigateUri="/companies"/>
The problem is when I click these buttons it shows a bluish border corresponding to the hyperlink button area during the click event. There is a way I can avoid showing that?
I found the answer in other blog, just set IsTabStop="False" in the HyperLinkButton instance.
For info on styling controls, see http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx (skip down to the Customizing Controls using Control Templates section halfway down). If you want to start with the default style (usually a good idea--start here and add/change/remove things until you get what you want) look here: http://msdn.microsoft.com/en-us/library/cc296242(VS.95).aspx.
In this case, I believe the offender is the "FocusVisualElement." You could either change the color of it, set visibility to "Collapsed," or remove/change the "Focused" state so the storyboard isn't run.
You can edit a template of HyperlinkButton in Blend:
1.right click on control choose "Edit Template->Edit a copy"
2.in "States" panel click "Pressed"
3.change property "Stroke" of rectangle named "FocusVisualElement" from solid color to "No brush"
http://silverlight.net/forums/t/40896.aspx