I am wondering what the best way is solve this problem I have a text block with an image around a border and I can add properties and I want to add a border around it to be like a stack of cards. I'll demonstrate what I mean with pictures. The first picture I have is what displays just now.
The second picture is what I want it to display if there is properties added in this example there would be 5 added properties.
Use many borders that overlap, with a non transparent background.
The xaml appearing order is the painting order.
So the last components appear over the first ones.
All the components are in a grid that allow many children.
<Grid>
<Grid.Resources>
<system:Double x:Key="width1" >100</system:Double>
<system:Double x:Key="height1" >30</system:Double>
</Grid.Resources>
<Border BorderThickness="1" BorderBrush="Gray"
Background="White"
Margin="120 80 0 0"
Width="{StaticResource width1}"
Height="{StaticResource height1}" />
<Border BorderThickness="1" BorderBrush="Gray"
Background="White"
Margin="110 90 0 0"
Width="{StaticResource width1}"
Height="{StaticResource height1}" />
<TextBlock Text="+6"
Padding="20 7 0 0"
Margin="100 100 0 0"
Background="Gray"
Width="{StaticResource width1}"
Height="{StaticResource height1}"/>
</Grid>
Note : the use of resources for setting same size to all components
Regards
Related
I'm trying to have a yellow border just over the top of my grid cells minus the first two cells(home button and search). I've tried a couple scenarioes.
This is the application header without any borders.
http://snag.gy/2lIIm.jpg
This is the application when I specified borders over the grid items. The problem with this is that it stops and doesn't extend to the end.
http://snag.gy/pVbHd.jpg
The picture below extends to the end but it's also ontop of item 1 and 2. I'm trying not to have a border on the first two items.
http://snag.gy/6QiX9.jpg
If I can possibly get help with this issue please.
WorkTabView.xaml
Border over selected buttons but not extended to the far right - Pseudo Code
<Grid>
....
<Button-Home Grid.Column0>
<AutoCompleteBox Grid.Column1>
<Border BorderBrush="Yellow" Grid.Column=2 BorderThickness="0,1,0,0">
<Button1/>
<Border/>
<Border BorderBrush="Yellow" Grid.Column=3 BorderThickness="0,1,0,0">
<Button2/>
<Border/>
<Grid>
Border over everything, but my goal is not to have over search and home button Pseudo Code
<Border BorderBrush="Yellow" BorderThickness="0,1,0,0">
<Grid>
....
<Button-Home Grid.Column0>
<AutoCompleteBox Grid.Column1>
<Button1 Grid.Column2/>
<Button2 Grid.Column3/>
<Grid>
</Border>
Sorry for Pseudo code, posted it to prevent lengthy post and repetitions. My goal is to have the border around everything BUT the search and yellow home button.
I see two options here.
Use your Option1, but place an extra item to fill the rest of the remaining space.
<Grid>
....
<Button-Home Grid.Column0>
<AutoCompleteBox Grid.Column1>
<Border BorderBrush="Yellow" Grid.Column=2 BorderThickness="0,1,0,0">
<Button1/>
<Border/>
<Border BorderBrush="Yellow" Grid.Column=3 BorderThickness="0,1,0,0">
<Button2/>
<Border/>
<Border BorderBrush="Yellow" Grid.Column=3 BorderThickness="0,1,0,0">
<SomeBlankItemToTakeUpRemainingSpace/>
<Border/>
<Grid>
If this is used, I would definitely see about creating a custom style or template for the border to avoid repeating myself
Alternatively, split the two sections up into two separate panels, and store them in another panel that has the default behavior of filling all available space, like the DockPanel
<DockPanel>
<Grid DockPanel.Dock="Right">
<HomeButton>
<SearchBox>
</Grid>
<Border> <!-- this is last item in DockPanel, so should stretch to fill all available space -->
<Grid>
<Button1 Grid.Column1/>
<Button2 Grid.Column2/>
<Grid>
</Border>
</DockPanel>
Personally I prefer the second option. LayoutControls in WPF are meant for laying out your controls, not for creating tables of items, so to me this seems like the cleaner approach.
I've seen quite a few people asking this question and i feel like my question is slightly different. I have a listbox that holds a series of identical custom made user controls. These controls are added to the listbox at runtime. Now i currently have my listbox items resizing themselves properly upon first creation and insertion into the control.
Here is the strange part. If I resize the listbox the controls that have been visible previously are not resized to the new listbox width. In other words if i add 12 controls and the box only shows 4 (the rest are hidden by a scrollbar) then if i resize the box the first 4 controls will still be the original width and if i scroll then the other 8 will be the correct size. Also if i manipulate the list items in any way they resize themselves to the proper width automatically. SEE EDIT2
I've tried attaching to the sizeChanged event and issuing the following on both the listbox and the items but it has had no effect. I think i need to find some way of resetting the layout information for the listbox items but i can't find the command.
item.InvalidateArrange();
item.InvalidateMeasure();
Layers.UpdateLayout();
item.UpdateLayout();
I think this has something to do with the items i'm adding because even if i detach the items from the lisbox and then attach them they remain the wrong width.
Here is my listbox code:
<ListBox x:Name="Layers" VerticalContentAlignment="Top" Margin="0,17,0,0" BorderThickness="0,1,0,0" HorizontalContentAlignment="Stretch" SizeChanged="Layers_SizeChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Here is the code for my items
<UserControl x:Class="ListOverlayItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:Data"
HorizontalContentAlignment="Stretch">
<UserControl.Resources>
<data:Translator x:Key="translatorString" />
</UserControl.Resources>
<Border BorderBrush="Silver" BorderThickness="0,0,0,0" Name="border1" HorizontalAlignment="Stretch">
<Grid x:Name="layout" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- Column 0 -->
<ScrollBar Name="arrangeIcon" FlowDirection="LeftToRight" Maximum="10" SmallChange="1" Value="5" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
<!-- Column 1 -->
<Slider Name="OverlayOpacity" Height="25" Grid.Column="1" Margin="6,0,0,0" Grid.Row="1" Maximum="1" LargeChange="0.1" ValueChanged="OverlayOpacity_ValueChanged"/>
<TextBlock x:Name="OverlayName" Text="{Binding Path=LocationName}" Foreground="#FFF08D2D" Margin="10,2,0,0" Grid.Column="1" FontSize="12" Height="18" VerticalAlignment="Top" />
<!-- Column 3 -->
<Button Name="SettingsButton" Grid.Column="3" Content="{Binding TRK_OV_Settings, Source={StaticResource translatorString}}" VerticalAlignment="Center" Click="SettingsButton_Click" />
<CheckBox x:Name="OverlayEnabled" FlowDirection="LeftToRight" Grid.Column="2" DataContext="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.RowSpan="2" Checked="OverlayEnabled_Checked" Unchecked="OverlayEnabled_Unchecked" />
<TextBlock Name="percentage" Text="100%" FontSize="9" TextAlignment="Right" Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" Margin="2,6,26,6" MinWidth="30"/>
</Grid>
</Border>
Again it seems like my UserControl is correctly able to scale itself its just not getting the command to do so when the parent container is resized.
EDIT: Whoops, removed the WPF tag because it was incorrectly added. I think i've got it down to slider being the culprit. If i set the slider to a fixed size instead of 'stretch' then the item correctly scales just fine. So the question now is how do i force the slider to resize itself.
EDIT2: I know what is causing the issue but i don't know how to solve it. What is happening is the slider that i have in my user control will NOT resize along with the rest of the control unless i change the value of the slider during the resize. The instant i change its value even a fraction it resizes itself automatically. How can i force it to resize?
I determined that the slider was causing the issue and i tried many ways to force the slider to re-draw when it needed to but i was unsuccessful. My final solution was to remove the slider entirely. Works fine now.
I have a WPF Window with Viewbox. I want one of the child elements of this Viewbox to stay the same size at any screen resolution.
My XAML:
<Viewbox Name="MyMainViewbox" Stretch="Fill">
<Grid Name="MyMainGrid">
<Image Source="Images/bg.bmp" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill"/>
<Image Name="Thumb1" Source="Images/t1.png" MouseUp="Right_Click" Margin="0, 100, 50, 0" HorizontalAlignment="Right" VerticalAlignment="Stretch" Visibility="Visible"/>
<Image Name="Thumb2" Source="Images/t2.png" MouseUp="Left_Click" Margin="50, 100, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Stretch" Visibility="Visible"/>
<Image Name="CurThumb" Width="640" Height="480" Stretch="UniformToFill" Margin="0, 50, 0, 0" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
</Grid>
</Viewbox>
The first 2 images inside the Viewbox are predefined and scaled finely at the different screen resolutions.
My problem is with the 3rd image that gets its source during the runtime and should be of the same exact size at all resolutions. It will contain photos taken at 4x3 aspect ration, and I want them to stay so.
However at 16x9 screen resolutions they are stretched. I have tried to set a fixed size in XAML - it doesn't work. I have tried to set Stretch to None - doesn't work neither. I have tried to rest the sizes of this Image in the code behind - to no avail.
What else can I do to make this third picture unscalable?
It should stay inside the Viewbox for a couple of reasons.
Use two overlapping elements.
<Grid>
<Viewbox>
<Grid>
... scaled images
</Grid>
</Viewbox>
<Grid>
... non scaled images
<Grid>
<Grid>
I am using a canvas with an Expander embedded within it, so that when the expander is expanded, it will overlay the controls below.
<Canvas Grid.Row="0" Panel.ZIndex="99">
<Border Width="450" BorderThickness="1">
<Expander etc />
</Border>
</Canvas>
<OtherControls Grid.Row="1"/> etc
Instead of setting the size of the canvas, is there a way to allow the user to drag size it instead?
here's a thought: Put everything in the grid. Let the grid resize itself automatically, put canvas in the grid (make sure it takes up the whole grid) so that it will follow the parent's size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Canvas Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Width="450" BorderThickness="1">
<Expander etc />
</Border>
<OtherControls Grid.Row="1"/>
</Grid>
not sure how relevant this might be, but check out this post. Maybe it'll give you some ideas (I wrote that 4 years ago, way too long to remember specifics, but code compiles and runs):
http://denismorozov.blogspot.com/2008/01/how-to-resize-wpf-controls-at-runtime.html
Please pardon my ignorance- I'm very new to WPF.
I am looking to implement a minor, visual effect in my application that gives the look of "inner" rounded corners. The window in question has a dark border that encapsulates several UIElements, one of which is a StatusBar, located at the bottom of the window. This StatusBar has a dark background that matches the window's border. Above the StatusBar is a content view, which is currently a Grid- its background is semi-transparent (I think that this is something of a constraint- you can see through the content view to the desktop below). I would like for the content view (represented by the transparent, inner area in the figure below) to have the look of rounded corners, though I expect to have to sort of create the illusion myself.
(Can't post the image because I'm a lurker and not a poster- please find the drawing here)
My first approach was to add a Rectangle (filled with the same, dark color as the border) immediately above the StatusBar and to assign a Border with rounded corners to its OpacityMask (similar to the solution proposed by Chris Cavanagh**). Sadly, the effect that is produced is the exact opposite of that which I am trying to achieve.
I understand that the Clip property can be of use in this sort of situation, but it seems to me that using any sort of Geometry will prove to be inadequate as it won't be dynamically sized to the region in which it resides.
EDIT: Including my XAML:
<Grid Background="{StaticResource ClientBg}" Tag="{Binding OverlayVisible}" Style="{StaticResource mainGridStyle}">
<DockPanel LastChildFill="True">
<!-- Translates to a StackPanel with a Menu and a Button -->
<local:FileMenuView DockPanel.Dock="Top" />
<!-- Translates to a StatusBar -->
<local:StatusView DockPanel.Dock="Bottom" />
<!-- Translates to a Grid -->
<local:ContentView />
</DockPanel>
</Grid>
Any pointers are more than welcome- I'm ready to provide more indepth detail if necessary.
** http://www.dotnetkicks.com/wpf/WPF_easy_rounded_corners_for_anything
EDIT: Now I got what you mean. In fact you can use Path + OpacityMask approach. You have to draw "inverted" path, to use it as opacity mask. But I have simpler and faster solution for you :). Use Border + CornerRadius, and fill the gaps with solid paths. Just try the following code in Kaxaml and let me know if this is what you were looking for:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240"
Height="320"
AllowsTransparency="True"
Background="Transparent"
WindowStyle="None">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Border Background="Black"/>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="5">
<Grid>
<Border Background="White" CornerRadius="0, 0, 5, 5" Opacity="0.7"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<TranslateTransform X="15"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Border Grid.Row="2" Background="Black"/>
</Grid>
</Window>
PS: You can simplify this solution by avoiding render transforms, but you got the idea.