I am new to WPF and need your help in resolving my styling issue.
I have applied border styling to GRID as below
<Border CornerRadius="5" BorderBrush="Gainsboro" BorderThickness="1,1,0,0" Name="border1" Margin="90,54,20,50" >
<Border BorderBrush="Gray" CornerRadius="5" BorderThickness="0,0,1,1" >
<Border.Effect>
<DropShadowEffect BlurRadius="10" Direction="-50" ShadowDepth="7" />
</Border.Effect>
<Border.Child>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="356*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="446*" />
</Grid.ColumnDefinitions>
<TextBox Name="TB1" Style="{StaticResource CustomTextBoxStyle}" Grid.Column="1" Margin="46,79,400,277" Grid.Row="1" />
<ComboBox Height="24" Name="comboBox1" Width="110" Grid.Column="1" Margin="304,86,232,276" Grid.Row="1" />
</Grid>
</Border.Child>
</Border>
</Border>
Then I have placed text box and combo box in the grid with custom styling.
The problem is parent GRID's border style is applied to child TEXTBOX along with its own custom style properties.
Could you please help me out in this?
Thanks
Bharat
As per MSDN doucment -
When a BitmapEffect is applied to a layout container, such as
DockPanel or Canvas, the effect is applied to the visual tree of the
element or visual, including all of its child elements.
But, there is a workaround as described here and here to have another border with same position but without the effect, that would resolve the problem -
<Grid>
<Border Margin="10" BorderBrush="Red" BorderThickness="1">
<Border.Effect>
<DropShadowEffect Color="Gray"/>
</Border.Effect>
</Border>
<Border Margin="10">
<!-- controls -->
</Border>
</Grid>
Related
Basically I have an WPF border and I would like to fire an event when mouse is on one of the sides and corners:
Left
Top-Left corner
Bottom-Left corner
Right
Top-Right corner
Bottom-Right corner
Top
Bottom
I need to detect when mouse is on each of them in order to fire different events.
How can I do this?
Instead of detecting the mouse events directly on the Border, you can put a layer of controls on top of the Border and detect the mouse events on them. The easiest way to put this layer is to use a Grid, and use simple Borders as the controls:
<Grid>
<!-- Your border -->
<Border
BorderThickness="1"
BorderBrush="LightBlue"
Width="100" Height="100"
>
<!-- Contents -->
</Border>
<Grid
Width="100" Height="100"
>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="*" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
</Grid.ColumnDefinitions>
<Border
Grid.Row="0" Grid.Column="0"
Background="Transparent"
MouseEnter="OnMouseEnterTopLeft"
/>
<Border
Grid.Row="0" Grid.Column="1"
Background="Transparent"
MouseEnter="OnMouseEnterTop"
/>
<Border
Grid.Row="0" Grid.Column="2"
Background="Transparent"
MouseEnter="OnMouseEnterTopRight"
/>
<Border
Grid.Row="1" Grid.Column="0"
Background="Transparent"
MouseEnter="OnMouseEnterLeft"
/>
<Border
Grid.Row="1" Grid.Column="2"
Background="Transparent"
MouseEnter="OnMouseEnterRight"
/>
<Border
Grid.Row="2" Grid.Column="0"
Background="Transparent"
MouseEnter="OnMouseEnterBottomLeft"
/>
<Border
Grid.Row="2" Grid.Column="1"
Background="Transparent"
MouseEnter="OnMouseEnterBottom"
/>
<Border
Grid.Row="2" Grid.Column="2"
Background="Transparent"
MouseEnter="OnMouseEnterBottomRight"
/>
</Grid>
</Grid>
Notice that the sizes of the Border and Grid must be the same so that they align perfectly. They don't need to be a fixed size like I've shown here; they may stretch inside their container.
In the Grid definitions for rows and columns, I've chosen a detection size of 5 pixels, but of course you can choose whatever size you want. Also, each Border inside the Grid must have its Background set to Transparent; otherwise, the mouse event is not detected.
I wanted to put Button in TextBox, but as I found it's not possible so I decided to do something like this:
Xaml for this looks as shown below:
<Border Grid.Row="4" Grid.Column="2" Margin="10,0,10,0"
BorderBrush="Gray" BorderThickness="1">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBox BorderBrush="LightGray" BorderThickness="1" Text="{Binding WaybillNumber}"
Width="245"/>
<Button Content="*" Width="15" BorderThickness="1"/>
</StackPanel>
</Border>
The problem I have is that, when I resize my window (decreasing width) my Button dissapears:
I want it to behave as DateTimePicker does. I have tried many ways to make TextBox width auto adjustable ( * in width isn't correct input, auto decreases width of TextBox, I also tried to define style resource in StackPanel resources for TextBox width, but it doesn't work too), but Haven't found correct way yet.
Replace the StackPanel with a Grid:
<Border Margin="10,0,10,0" BorderBrush="Gray" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox BorderBrush="LightGray" BorderThickness="1" Text="{Binding WaybillNumber}" />
<Button Grid.Column="1" Content="*" Width="15" BorderThickness="1"/>
</Grid>
</Border>
use Grid instead of StackPanel. Setting fixed size (Width/Height) is not a good idea for adaptive layout. Grid will allow TextBox to stretch.
one option is to have separate columns for TextBox and Button:
<Border Grid.Row="4" Grid.Column="2" Margin="10,0,10,0"
BorderBrush="Gray" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox BorderBrush="LightGray" BorderThickness="1" Text="{Binding WaybillNumber}" />
<Button Content="*" Grid.Column="1" Width="15" BorderThickness="1"/>
</Grid>
</Border>
alternatively place them in the same cell and let Button overlap TextBox (it will look like as a part of TextBox but can hide part of a long text):
<Border Grid.Row="4" Grid.Column="2" Margin="10,0,10,0"
BorderBrush="Gray" BorderThickness="1">
<Grid>
<TextBox BorderBrush="LightGray" BorderThickness="1" Text="{Binding WaybillNumber}" />
<Button Content="*" HorizontalAlignment="Right" Margin="2" Width="15" BorderThickness="1"/>
</Grid>
</Border>
I made a round window with Border like this:
<Border CornerRadius="{Binding WindowCornerRadius}" Background="{StaticResource BackgroundDarkBrush}">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" Opacity="0.2"></DropShadowEffect>
</Border.Effect>
</Border>
<Grid>
<Grid.RowDefinitions>
<!--Title Bar-->
<RowDefinition Height="{Binding TitleHeightGridLength}"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--Title Bar-->
<Border Background="{StaticResource TitleBrush}" CornerRadius="{Binding WindowCornerRadius,WindowCornerRadius,0,0}">
<Grid Grid.Column="0" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button Style="{StaticResource SystemIconButton}" Command="{Binding MenuCommand}">
<Image Source="Images/Logo/Wink.png"></Image>
</Button>
</Grid>
</Border>
</Grid>
</Grid>
</Border>
As you see I changed Background of first GridRow and this prevents it to be round(To have corner radius) and I would like to correct it adding border to first GridRow But I failed. The code above gives me error in CornerRadius="{Binding WindowCornerRadius,WindowCornerRadius,0,0}" :
No constructor for type "Binding" has 4 arguments.
My question is am I doing it correct by adding another border? (If yes how can I Bind CornerRadius individually).
You cannot use a binding like this. A binding on CornerRadius will look for a Thickness-typed property from your DataContext, with the Path given inside the binding. The path is implicit in a binding, but you can set it explicitely : Property="{Binding Path=blabla}". More info here.
Does the CornerRadius dynamically change? Why?
Also have a look at this :
Binding only part of the margin property of WPF control
There are a number of similar questions on SO but so far I have not been able to resolve my problem using them.
I have a bunch of Controls inside a WrapPanel and the WrapPanel is inside a ScrollViewer. The ScrollViewer is inside a Grid.
I am trying to get all the <Border> controls in the WrapPanel to have an Orientation of 'Vertical' (so that they flow down and when there is no more space left vertically they wrap horizontally) with a HorizontalScrollBar that appears when there is no more space left Horizontally.
My code so far is as follows:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Width="{Binding ElementName=configGrid, Path=ActualWidth}" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
// many more <border> blocks here....
</WrapPanel>
</ScrollViewer>
</Grid>
This almost works as expected, the various content flows vertically and when there is not enough room at the bottom it moves up and right and starts at the top again. But I never get any horizontal scrollbars and the controls just disappear off the right of the screen.
I'm sure this is something really simple I'm missing but I can't quite figure it out.
As a bit of further info, the various Border controls and sub elements are all of dynamic width and height (which is why I opted for a vertical orientation WrapPanel rather than Horizontal)
Any help would be greatly appreciated.
You have to remove the Width from your WrapPanel.
That width wants to stretch to infinity, which prevents the ScrollViewer from corrent measuring the boundaries of the WrapPanel resulting in never showing the ScrollBar.
Code below shows a working example:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" >
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
</WrapPanel>
</ScrollViewer>
</Grid>
i have the following problem. as far a i put my Textboxes in a scrollviewer my ValidationError Adorner get cut by the ScrollViewer. i found some answers to Adorner and ScrollViewer which say i need to retemplate my scrollviewer and add an adornerdecorator. but this makes no sense to me and it doesnt help either.
as far as i know should the Validation Adorner rendered in the nearest AdornerDecorator. the ScrollViewer by default has no AdornerDecorator. so does anybody know why my ValidationAdorner get cut?
I also looking for a solution :)
EDIT: it seems the ScrollContentPresenter which comes from the ScrollViewer Template cause the problem, because it has a AdornerLayer by default. Any ideas how to solve my issue?
EDIT2:
is there a way to create a new ScrollConntentPresenter Template without a Adornerlayer?
or is there a way to remove a the Adornerlayer from the VisualTree?
or can i force the Adornerlayer to render in a" higher/most top" AdornerLayer?
or can i have Scrolling Content without a ScrollViewer?
here is my xaml:
<UserControl>
<AdornerDecorator>
<Grid x:Name="RootControl">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="main" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="InputBorder" Grid.Column="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="InputContainer" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
...some rows...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...some columns...
</Grid.ColumnDefinitions>
<TextBox .../><!--this Validation Adorner get cut by scrollviewer-->
</Grid>
</ScrollViewer>
</Border>
</Grid>
</Grid>
</AdornerDecorator>
</UserControl>
here is my Validation Template:
<ControlTemplate x:Key="ValidationTemplate" >
<DockPanel>
<AdornedElementPlaceholder Name="MyAdornedElement" />
<Grid>
<Border Background="{StaticResource BrushError}" Margin="3,0,0,0" x:Name="ErrorControl" BorderBrush="White" BorderThickness="1">
<TextBlock Margin="10,3,5,2"
Text="{Binding ElementName=MyAdornedElement,Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}"
Visibility="{Binding ElementName=MyAdornedElement,Path=AdornedElement.Visibility}"
Foreground="White" FontWeight="Bold">
</TextBlock>
</Border>
<Path x:Name="path" Margin="3,0,0,0" Data="M 0,10 L 10,0 " Fill="{StaticResource BrushError}"
StrokeThickness="2" Stroke="White"
/>
</Grid>
</DockPanel>
</ControlTemplate>
the behavior is intended. A ScrollViewer is able to hide some of it's contents (ie the content lying in the extent). Showing an Adorner for such content that doesn't get clipped, results in a strange UI.
What you should be able to do in the ValidationTemplate though is putting the Grid element inside a Popup control. Please try that and report if it worked.