I need to add wrapping to my Radio Button controls all but for on one window. I am stuck trying to figure out how I can conditionally remove or change the value of my wrap panel from my control when the radio buttons are added to a different page that does not need wrapping.
This is the coding to add the wrapping.
XAML
<Style TargetType="auc:APRadioButtonListBox">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Margin" Value="-2,0,0,0" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<toolkit:WrapPanel Background="Transparent" ItemWidth="Auto" x:Name="RadioListWrapPanel" Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
C#
public virtual ItemsPanelTemplate ItemsPanel { get; set; }
Can anybody advice me on how to add Radio buttons to another page without the wrapping.
Since you have the style applied at the application level, it will be applied implicitly to all controls that match its target type. You have two options to get a page without wrapping...
Override the style on the required pages with a style that omits the wrapping
Give the default style you have a key and explicitly apply it where it's needed and others won't have the wrapping.
The latter makes sense if more pages have no need for the wrapping than those that do. Consider the following
<Style x:Key="WrappedRadioButtons" TargetType="auc:APRadioButtonListBox">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Margin" Value="-2,0,0,0" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<toolkit:WrapPanel Background="Transparent" ItemWidth="Auto" x:Name="RadioListWrapPanel" Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
</Style>
Now in the pages you need to apply this style, you can do the following:
<uac:APRadioButtonListBox Style="{StaticResource WrappedRadioButtons}" />
Any other that doesn't explicitly reference this style will get the default settings. Alternatively, you can define the other style without wrapping and give it a key that you can apply to the pages that don't require the wrapping.
create a new style derived from base and override style setter on a page where WrapPanel is not required
<Style TargetType="auc:APRadioButtonListBox"
BasedOn="{StaticResource {x:Type auc:APRadioButtonListBox}}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
or simply do it for auc:APRadioButtonListBox element:
<auc:APRadioButtonListBox>
<auc:APRadioButtonListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</auc:APRadioButtonListBox.ItemsPanel>
</auc:APRadioButtonListBox>
alternatively define a named style in resource dictionary which doesn't set ItemsPanel. default style will extend it. and on one page which doesn't need wrapping use named style:
<Style TargetType="auc:APRadioButtonListBox" x:Key="APRadioButtonListBoxStyle">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Margin" Value="-2,0,0,0" />
</Style>
<Style TargetType="auc:APRadioButtonListBox" BasedOn="{StaticResource APRadioButtonListBoxStyle}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<toolkit:WrapPanel Background="Transparent" ItemWidth="Auto" x:Name="RadioListWrapPanel" Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<auc:APRadioButtonListBox Style="{StaticResource APRadioButtonListBoxStyle}"/>
Related
There is a ListBox in which there are several ListBoxItems. I want to move items using the arrows (up, down, left, right). When I add one element and then select it, it moves wonderfully, but when there are several elements, it turns out that when you click the arrows, they jump from one element to another and it turns out that I start moving another element. How can I prevent switching between elements using arrows? Attaching the code:
<ListBox x:Name="drawing"
Grid.Row="0"
ItemsSource="{Binding Path=Figures}"
SelectedItem="{Binding Path=SelectedFigure_M}"
SelectionMode="Single"
Background="Transparent"
Height="{Binding HeightDrawing}"
Width="{Binding WidthDrawing}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MouseMove="drawing_MouseMove"
MouseLeftButtonDown="drawing_MouseLeftButtonDown"
MouseLeftButtonUp="drawing_MouseLeftButtonUp"
PreviewMouseWheel="drawing_MouseWheel"
KeyDown="drawing_KeyDown"
SelectionChanged="drawing_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplateSelector>
<local:FigureTemplateSelector EllipseTemplate="{StaticResource EllipseTemplate}"
LineTemplate="{StaticResource LineTemplate}"
RectangleTemplate="{StaticResource RectangleTemplate}"
TextTemplate="{StaticResource TextTemplate}"/>
</ListBox.ItemTemplateSelector>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left"
Value="{Binding X}" />
<Setter Property="Canvas.Top"
Value="{Binding Y}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border"
BorderThickness="1"
Padding="1">
<ContentPresenter Name="Content" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Border"
Property="BorderBrush"
Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I answer my own question: First, you must prohibit switching between elements using the up, down, left, and right arrows. Required in the ListBox.ItemContainerStyle add a Setter:
<Setter Property="KeyboardNavigation.DirectionalNavigation" Value="None" />
Second: Required in the ListBox.ItemContainerStyle add a Setter that disables the IsTabStop function:
<Setter Property="IsTabStop" Value="False" />
The full code will look like this:
<ListBox x:Name="drawing"
Grid.Row="0"
ItemsSource="{Binding Path=Figures}"
SelectedItem="{Binding Path=SelectedFigure_M}"
SelectionMode="Single"
Background="Transparent"
Height="{Binding HeightDrawing}"
Width="{Binding WidthDrawing}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MouseMove="drawing_MouseMove"
MouseLeftButtonDown="drawing_MouseLeftButtonDown"
MouseLeftButtonUp="drawing_MouseLeftButtonUp"
PreviewMouseWheel="drawing_MouseWheel"
KeyDown="drawing_KeyDown"
SelectionChanged="drawing_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplateSelector>
<local:FigureTemplateSelector EllipseTemplate="{StaticResource EllipseTemplate}"
LineTemplate="{StaticResource LineTemplate}"
RectangleTemplate="{StaticResource RectangleTemplate}"
TextTemplate="{StaticResource TextTemplate}"/>
</ListBox.ItemTemplateSelector>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left"
Value="{Binding X}" />
<Setter Property="Canvas.Top"
Value="{Binding Y}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border"
BorderThickness="0.5"
Padding="1">
<ContentPresenter Name="Content" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Border"
Property="BorderBrush"
Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="KeyboardNavigation.DirectionalNavigation"
Value="None" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Source
There is something I'm missing but I do not understand what:
If I do this:
<ToggleButton Content="" FontFamily="Segoe MDL2 Assets" />
The button changes like this when pressed
But if I change it using the template then it disappears:
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate>
<TextBlock Style="{StaticResource LargeIconStyle}" Text=""/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Before check:
After check:
I cannot understand why.
Can you help me?
The color of the checked button is the system one.
Just for your reference the styles are:
<Style
x:Key="LargeIconStyle"
BasedOn="{StaticResource BaseIconStyle}"
TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="32" />
</Style>
<Style x:Key="BaseIconStyle" TargetType="{x:Type TextBlock}">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Center" />
</Style>
The problem is that you're using a ControlTemplate and the Template property. These are used for the UI and functionality of the control. So essentially, you're turning your control into a TextBlock.
Instead, you want to use a DataTemplate and the ContentTemplate property.
I have developed WPF code; I'm showing a figure like 0.77. But I want to show a figure like 0.7777.
I have two separate styles for both GridColumn and TextBox.
My code for gridcolumn is:
<Style TargetType="{x:Type dxg:GridColumn}" x:Key="dxGridColumnNumber" >
<Setter Property="ColumnHeaderContentStyle" Value="{DynamicResource dxHeaderContentControl}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" Mask="N2" MaskType="Numeric" HorizontalAlignment="Right" MaskUseAsDisplayFormat="True"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Also This is for textbox:
<Style TargetType="{x:Type dxe:TextEdit}" x:Key="dxTextEditTutarText" BasedOn="{StaticResource dxTextEditBaseText}">
<Setter Property="MaskUseAsDisplayFormat" Value="True" />
<Setter Property="MaskType" Value="Numeric" />
<Setter Property="Mask" Value="N2" />
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Style>
Change the mask to "N4". In Your code, you set the mask to "N2" twice, which is unnecessary.
Just change
<Setter Property="Mask" Value="N2" />
to
<Setter Property="Mask" Value="N4" />
and remove Mask property in you TextExit (or the other way round)
For more options see https://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.100)
And the DevExpress documentation: https://documentation.devexpress.com/WindowsForms/1498/Controls-and-Libraries/Editors-and-Simple-Controls/Simple-Editors/Concepts/Masks/Mask-Type-Numeric
I have a WPF menu:
XAML:
<Style x:Key="{x:Type ContextMenu}" TargetType="{x:Type ContextMenu}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border Background="#FF171616" CornerRadius="5" BorderBrush="DarkGray" BorderThickness="5" Opacity="0.0">
<StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" Margin="5,4,5,4"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Am I using the correct x:Type ContextMenu to alter the drop down visualization? The menu item visual is altered because I've manually changed the style. But it is the context drop down on which I want to apply visuals.
How can I modify the context drop down itself?
Here is a paint sample of what I'm after:
To modify style for menu, you need to override Menu style.
Like below:
<Style TargetType="{x:Type Menu}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#FF171616" />
</Style>
Edit: you can actually modify the whole template also, if you like. But I think these properties should get you the visualization you are looking for.
First of all, I would like to add customized text blocks to my GUI with the least possible overhead. For instance: <TextBlock style={StaticRessources myTextBlock}>Text</TextBlock>
For now I have the following border style:
<Style x:Key="greenBox" TargetType="Border">
<Setter Property="Background" Value="#00FF00"/>
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="100"/>
</Style>
And I apply it in the following way:
<Border Style="{StaticResource greenBox}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Custom Text</TextBlock>
</Border>
My problem is, it needs 2 Tags and the properties set in the TextBlock will be redunant. I cannot figure out how to abstract both definitions into a single element.
that's where Label comes into play:
<Style TargetType="Label" x:Key="greenLabel">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Border Style="{StaticResource greenBox}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Label Style="{StaticResource greenLabel}">Custom Text</Label>
(in accordance with your other question: if this is the only place you use that borderstyle you can of course include these directly in that border not using an extra style)
You would need to create a custom control as described here. Or you could create a UserControl as well.