I'm currently displaying RadioButtons in my application as rows of ToggleButtons (see my last question). However, I'd like the buttons to be of the same width - currently, every button is just as wide as it has to be.
Since I'm working with templates, I'd like to avoid specifying the width every time I use the control if possible - instead, the width of every button in the row should be equal to that of the widest button in that group.
Any ideas how to do this in XAML? :-)
Maybe using a UniformGrid and setting int the style the property HorizontalAlignement="Stretch" will help.
If you have access to all the toggle buttons (e.g. they aren't databound) then there is a neat trick you can do by binding the minwidth of each button to the width of the one next to it. With the final button being bound to the first:
<StackPanel Orientation="Horizontal">
<Button x:Name="Button1" Content="Long text" MinWidth="{Binding ElementName=Button2, Path=ActualWidth}"/>
<Button x:Name="Button2" Content="A" MinWidth="{Binding ElementName=Button3, Path=ActualWidth}"/>
<Button x:Name="Button3" Content="Extremely long text that should cause this button to be really wide" MinWidth="{Binding ElementName=Button1, Path=ActualWidth}"/>
</StackPanel>
in your resources section create a style that targets ToggleButtons and sets the width to whatever value you want.
<Window.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Width" Value="50" />
</Style>
</Window.Resources>
Use a grid with a 1 button in each column and definethe widths like this
Related
Seems that a WPF application I inherited has a DataGrid
<DataGrid x:Name="dataGrid" ItemsSource="{Binding AllTroubleCalls}" SelectedIndex="{Binding SelectedIndex}"
I want to end up setting the Background color to yellow only if the Textbox contains text in it.
The text appears when I click on certain rows in the Datagrid
It seems that everything is based upon this "Binding"
{Binding ... }
I have a textbox that I added a Name to it
<TextBox ToolTipService.ShowDuration="120000" ToolTip="{Binding ThreatText}" Name="txtThreat" Text="{Binding ThreatText}"
TextWrapping="Wrap" AcceptsReturn="True"
VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible"
Margin="3" Grid.Row="8" Grid.Column="1"
Grid.ColumnSpan="3" Grid.RowSpan="1" IsReadOnly="True" Height="30"/>
Show then when I am in a method I can "test" this and it works
txtThreat.Background = new SolidColorBrush(Colors.Yellow);
However, I'm not understanding why I cannot get a handle on the data changing from whatever row is clicked on in the Datagrid, that data then appears "magically" in many textboxes etc.. on the xaml page.
I gather that the "Binding" is handling this, but it is also MVVM 2 way binding ?
I have tried plastering so many breakpoints into so many methods but I can't seem to get any of them to show me how the data is changing on row click
There's a little too much going on in this question without the details. However, I can at least answer what I think is your goal. The easiest way to get a textbox to be yellow if there's a text in it is with a style:
<TextBox >
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Yellow"></Setter>
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
As for figuring out how the data is changing... The Text displayed in your TextBox is bound to ThreatText. That means the text should change only when a property named ThreatText is changed in a class somewhere (your viewmodel). Have you tried putting a breakpoint on the setter for the ThreatText property? You can also put a breakpoint on the getter as well. It sounds like that when you click in the textbox/row, WPF updates the text in the UI, which means it's reevaluating the binding due to some change in ThreatText; this also means it'll hit the getter... you can check out the stack trace if it does to see what's going on.
Hi i'm using Reuxables Free Theme Inc in my wpf application.
I added the theme to App.xaml this way:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ReuxablesLegacy;component/inc.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
And in my Main.xaml i used a combobox by default its content aligned to the left:
I want to align the content of combobox to right.
When i tried HorizontalContentAlignment="Right" nothing changed.
I tried TextBlock.TextAlignment="Right" and the result is this:
This time comboboxitems are aligned to the right however selected item which is "1" in this picture, is still aligned to the left.
Whatever i tried i couldn't align the selected item to the right. What am I doing wrong?
If you look on the ComboBox Styles and Templates page on MSDN, you will find the default ControlTemplate for the ComboBox used in WPF. It's too large to display here, but if you look down the page, you'll see a TextBox control named PART_EditableTextBox which looks like this:
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
This is the control used for the selected value and as you can see, its HorizontalAlignment property is hard coded to "Left", so text in this TextBox will always align to the left.
Therefore, to align text to the right, you will need to define your own ControlTemplate for your ComboBox. You can find out how to do that in the Control Authoring Overview page on MSDN. Basically, you just need to copy the default ControlTemplate and replace the TextBox above with the TextBox below:
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
Once you have done this and applied your new ControlTemplate to the Template property of your ComboBox and set the HorizontalContentAlignment property to Right, then you should finally see your selected value text align to the right.
I have a toolbar
Code:
<ToolBarTray>
<ToolBar>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
</ToolBar>
</ToolBarTray>
On Image I only set the Source and on the Label I only set the Content.
However as the image shows, the buttons aren't sharing the same width. "Remove" button is wider than the others.
How can I make it so that all toolbar buttons will share the same width as the "Remove" button?
One way you could set the Width of all of your buttons at the same time, is to use a Setter in your ToolBar.Resources, like so:
<ToolBar>
<ToolBar.Resources>
<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
<Setter Property="Width" Value="80"/>
</Style>
</ToolBar.Resources>
<Button>
...
<Button>
...
</ToolBar>
That way you don't need to manually set the width on each Button individually.
You could also use a Setter to set the Stretch property, like so:
<Setter Property="Stretch" Value="None"/>
Edit:
Apparently, according to https://stackoverflow.com/a/2406213/3101082, you need to ensure that you are setting the Style using the x:Key="{x:Static ToolBar.ButtonStyleKey}" in order for it to apply to ToolBar buttons. I have updated my answer to reflect this.
This will likely work, I haven't tested it but by specifying the width of the button and the image scaling, you should find it does the trick.
<Button Width="intValue">
<StackPanel>
<Image Source="yourImage"
RenderOptions.BitmapScalingMode="Fant" />
<Label/>
</StackPanel>
</Button>
I want to create a column chart using the WPF toolkit, but I want to hide the Y axis and display the dependant value for each column below the X value.
Is this possible?? If not, what other way could be used to get this result??
Thanks in advance.
Yes, you can hide the Y-axis. You should add the y-axis explicitly to the Axes property of the chart and set the Opacity property, like this:
<charting:Chart.Axes>
<charting:LinearAxis Orientation="Y" Opacity="0" />
</charting:Chart.Axes>
As to the second question, you should change the AxisLabelStyle property. I answered a similar question here, you can look at the code and change the ControlTemplate according to your needs.
The template will look something like this, don't forget change bindings:
<Style x:Key="twoLabelsStyle" TargetType="charting:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:AxisLabel">
<StackPanel>
<TextBlock Text="{Binding Month}" />
<TextBlock Text="{Binding Number}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Anyway if it will not still work - add your source code to your question, it can help much better.
I have some DevExpress BarButtonItem layered on top of one another. So I need to ensure they are of the same width (e.g. if the content is longer or shorter, the buttons would "shift" around in between true and false visibility).
But I could not figure out how to add the width property to BarButtonItem. I tried the following but it doesn't work, and there is no Width property for BarButtonItem.
<dxb:BarButtonItem x:Name="btn1" Content="Foo">
<dxb:BarButtonItem.Style>
<Setter Property="Width" Value="100" />
</dxb:BarButtonItem.Style>
<dxb:BarButtonItem>
There is no direct way to specify BarButtonItem width or height, but you can specify the width or height of BarButtonItem.Content via the BarButtonItem.ContentTemplate property:
<dxb:BarManager Name="barManager" CreateStandardLayout="True">
<dxb:BarManager.Resources>
<DataTemplate x:Key="RedBarButtonItemContentWithFixedWidth">
<Border Background="Red" Width="100">
<ContentPresenter Content="{Binding}"/>
</Border>
</DataTemplate>
</dxb:BarManager.Resources>
<dxb:BarManager.Items>
<dxb:BarButtonItem x:Name="btn1" Content="Foo"
ContentTemplate="{StaticResource RedBarButtonItemContentWithFixedWidth}"/>
...