dev express How to align radio and its content in WPF - wpf

Am using devexpress wpf tools version 17.1. I am using Light Gray theme in the application.
Here is my xaml for radio buttons
<RadioButton Content="Forms"
Grid.Row="0"
GroupName="ActionGroup"/>
<RadioButton Content="All Questions"
Grid.Row="1"
GroupName="ActionGroup"/>
<RadioButton Content="Current Question"
Grid.Row="2"
GroupName="ActionGroup"/>
Here is the output
the content is top aligned, want to make it center with image. I placed these radio buttons in dx:GroupFrame, the groupframe header also has the same problem, header is stop aligned.

did you try to set the VerticalContentAlignment Property of the RadioButtons to Center?
Something along this lines:
<RadioButton Content="Current Question"
Grid.Row="2"
VerticalContentAlignment="Center"
GroupName="ActionGroup"/>

Related

Why is the CheckBox Content color not changing?

I'm using MahApps.Metro for my WPF app. As shown in the image below, the Forground color of a CheckBox remains default (black) if I try to change it to white.
Question: How can we change the content color to white?
None of the following XAMLs change the content's forground color. It remains default (black):
<CheckBox x:Name="chkTest" Content="Test Content" FontSize="20" Foreground="{StaticResource MahApps.Brushes.Badged.Foreground}" />
Or:
<CheckBox x:Name="chkTest" Content="Set Default" FontSize="20" Foreground="White" />
Or -as discussed here:
<CheckBox x:Name="chkTest" Content="Test Content" FontSize="20" Foreground="{StaticResource MahApps.Brushes.CheckBox.ForegroundChecked}" />
Display of the above XAMLs:
The MahApps.Metro CheckBox style has many states and triggers, which use different brushes. Overriding the Forground property does not cover all states.
However, there is a dedicated type CheckBoxHelper with many attached properties that you can use to customize every brush in each state for the content, as well as for the check mark glyph. Look for properties starting with Foreground... and CheckGlyphForeground.... There are attached properties for check mark and content background as well.
<CheckBox x:Name="chkTest" Content="Set Default" FontSize="20"
mah:CheckBoxHelper.ForegroundUnchecked="Blue"
mah:CheckBoxHelper.ForegroundUncheckedMouseOver="Green"
mah:CheckBoxHelper.CheckGlyphForegroundChecked="Red"
mah:CheckBoxHelper.CheckGlyphForegroundCheckedMouseOver="Purple"/>

How to create tiger textbox in 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.

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>

How can I avoid the bluish border when clicking a HyperlinkButton in Silverlight?

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

Resources