I'm using StackPanel in WPF just for easy layouting horizontally aligned boxes and lines, but it seems the performance of application is getting slower when using StackPanel.
All the Microsoft tutorials seems to talk only about freezing some SolidColorBrush etc. objects, but can StackPanel be freezed after first layout so the CPU doesn't have to layout it all the time, just once?
Or am I just forced to use the very fast Canvas object and layout all the objects inside it one by one?
Example 1: Very easy to layout in designer, but lacks performance:
<StackPanel Height="35" Canvas.Left="49" Canvas.Top="874" Width="395" Orientation="Horizontal">
<TextBox Text="test" Width="65"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="55"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="75"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="35"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="95"/>
<Rectangle Stroke="Black" Width="1" />
<TextBox Text="test" Width="65"/>
<Rectangle Stroke="Black" Width="1" />
</StackPanel>
Example 2: Good performance, making layout in designer is a pain:
<Canvas Height="35" Canvas.Left="49" Canvas.Top="914" Width="395">
<TextBox Text="test" Width="65" Height="35"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="65"/>
<TextBox Text="test" Width="55" Canvas.Left="66" Height="35"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="195"/>
<TextBox Text="test" Width="75" Height="35" Canvas.Left="122"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="121"/>
<TextBox Text="test" Width="35" Height="35" Canvas.Left="198"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="197"/>
<TextBox Text="test" Width="95" Height="35" Canvas.Left="234"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="329"/>
<TextBox Text="test" Width="65" Height="35" Canvas.Left="330"/>
<Rectangle Stroke="Black" Width="1" Height="35" Canvas.Left="233"/>
</Canvas>
No, StackPanel is not Freezable, however you mentioned that your GPU is having trouble rendering Animations at 60fps, Try dropping the Animation fps
In you main Windows constructor you can override the defualt framerate for Animations
I usally use 30fps as it is still smooth and users with low-end GFX cards will be able to run your application a lot smotther.
Example:
public MainWindow()
{
InitializeComponent();
Timeline.DesiredFrameRateProperty.OverrideMetadata(typeof(Timeline)
, new FrameworkPropertyMetadata { DefaultValue = 30 }); // 30 = 30fps
}
Give it a try and see if it helps
Related
I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>
In silverlight 5: I have built a product configurator that also constructs a drawing via combination of image's and Rectangle,Ellipse,Polygon constructions.
The configurator works fine and the drawing is fine as well. When a product is ready it's placed in a gallery (List box) and a thumbnail of the drawing is showing along with some main information. So far so good.
I can also save the configurations that are placed in the gallery to disc (xml) and load them later on to continue and finish. Here is the problem. I read the products one by one to the configurator, all business rules are in place then and the drawing takes place. But at the moment I save the product to the gallery the snapshot of the drawing stays blank.
I'm sure that all steps are fine because when I break at the point before placing the product in gallery, the drawing is showing correct. However, in the gallery the drawing is blank. So I assume a sync/timing/update problem but can't find a way to force redrawing of the grid that contains the images and drawings.
In axml, the listbox:
<ListBox x:Name="lbTiles" Loaded="lbTiles_Loaded" HorizontalAlignment="left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="2,2,0,0" Height="233" Width="892" d:LayoutOverrides="HorizontalAlignment" Background="Gainsboro" BorderThickness="2" BorderBrush="#FF606060">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Vertical" Background="Gainsboro">
<Border BorderThickness="1" BorderBrush="#4F000000" >
<Grid >
<Image Margin="0,0,0,0" Source="{Binding mImage, Mode=OneWay}" Stretch="Uniform" Height="110" ></Image>
</Grid>
</Border>
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mName, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mPrice, Mode=OneWay}" IsTabStop="False" IsHitTestVisible="False" FontSize="11" />
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mTotal, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
<TextBox TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mFreight, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The grid:
<Grid Name="myDrawing" Background="Gainsboro" Height="437" Width="486">
<Rectangle Name="clrFrame" Visibility="Collapsed" Margin="27,5,32,5" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL1" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL0" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Rectangle Name="clrWindow_1" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Rectangle Name="clrWindow_2" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Rectangle Name="clrWindow_3" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Ellipse Name="clrWindow_4" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" />
<Polygon Name="clrWindow_5" Visibility="Collapsed" StrokeThickness="18" IsHitTestVisible="False"></Polygon>
<Rectangle Name="clrDoor" Visibility="Collapsed" Margin="136,196,162,122" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL2" VerticalAlignment="Top" Width="429" IsHitTestVisible="False"/>
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL3" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL4" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL5" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
<Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL6" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
</Grid>
C# Code
for( int i = 0; i < count i++ )
{
xmlread al values to currentCasingComposition.....
writeToScreen(); // apply businessrules and do the drawing
myDrawing.InvalidateMeasure();
myDrawing.InvalidateArrange();
myDrawing.UpdateLayout();
// an exit here leaves me with the product in de confugurator and the drawing is fine
WriteableBitmap bmp = new WriteableBitmap(myDrawing, null); // capture drawing
currentCasingComposition.mImage = bmp;
currentCasingComposition.mImage.Invalidate();
currentCasingComposition.calculatePrice();
ocCasingCompositions.Add(currentCasingComposition); to gallery via ObservableCollection
}
Who knows the solution?
BR, Ton
UpdateLayout() is asynchronous on the UI thread, so you should wait for it to complete before calling the rest of the block. Unfortunately, I can find nothing on how to get notified when UpdateLayout() completes. All the examples that refer to it use a DispatcherTimer to wait a second or so before carrying on. So what I would do is create a one-off dispatcher timer, set its interval to 1000 milliseconds (or less, as needed) , and execute the rest of your code on it Tick event.
I have created a modal WPF window that looks as follows:
Here is the code for the window:
<Window x:Class="Dionysus.Core.Controls.ModalWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ModalWindow" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid Name="MainGrid">
<Rectangle Fill="Gray" Opacity="0.7" />
</Grid>
The "ErrorControl" is then added as follows:
MainGrid.Children.Add(uc);
The problem is as soon as I expand the stack trace, the controls transparency also changes:
I am assuming this has something to do with the ScrollViewer that uses the incorrect transparency, ie of the Rectangle instead of the containing Window.
I have also set the Opacity of the UserControl which owns the ScrollViewer to 1 and then binded the Opacity:
<ScrollViewer Background="WhiteSmoke" Opacity="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=Opacity}">
Can anyone help me?
--
UPDATE
Here is the code for the UserControl that is inserted into the Window
<Grid x:Name="LayoutRootx" Background="WhiteSmoke">
<StackPanel VerticalAlignment="Stretch">
<TextBlock TextWrapping="Wrap" Margin="5" Text="An error has occured:" Foreground="Black" FontSize="15" FontWeight="Medium"/>
<TextBlock TextWrapping="Wrap" Margin="5,10,5,5" Text="{Binding Error}"/>
<odc:OdcExpander Header="Stack Trace" Margin="5" IsExpanded="False" Background="WhiteSmoke">
<TextBox Text="{Binding StackTrace}" TextWrapping="Wrap" Margin="5,10,5,5" IsReadOnly="True" MaxHeight="370"/>
</odc:OdcExpander>
<odc:OdcExpander Header="Comment" Margin="5" IsExpanded="False">
<TextBox Text="{Binding Comment}" TextWrapping="Wrap" Margin="5,10,5,5" MaxHeight="370" Name="txtComment"/>
</odc:OdcExpander>
<StackPanel Margin="5,10,5,5" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource DionysusButton}" Width="100" Height="23" IsDefault="True" Name="btnSendError">
<StackPanel Orientation="Horizontal">
<Image Source="/Dionysus.Shell;component/Images/camera-icon.png" Margin="0,0,5,0">
</Image>
<TextBlock Text="Send to IT" VerticalAlignment="Center"/>
<core:DionysusTriggerAction Height="0" Width="0" TargetControl="{Binding ElementName=btnSendError}" MethodName="SendError"></core:DionysusTriggerAction>
</StackPanel>
</Button>
<Button Style="{StaticResource DionysusButton}" Width="100" Height="23" Name="btnExit" Margin="10,0,0,0" IsCancel="True">
<StackPanel Orientation="Horizontal">
<Image Source="/Dionysus.Shell;component/Images/DeleteRed.png" Margin="0,0,5,0">
</Image>
<TextBlock Text="Close" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<core:DionysusTriggerAction Height="0" Name="triggerAction2" Width="0" TargetControl="{Binding ElementName=btnExit}" MethodName="Exit"></core:DionysusTriggerAction>
</StackPanel>
</StackPanel>
</Grid>
If your window has a fixed size and cannot be resized, you can use the following trick:
<Grid>
<Border BorderThickness="100" BorderBrush="Gray" Opacity="0.7">
<Grid Background="White" Grid.Column="1" Grid.Row="1" x:Name="contentPlaceHolder">
<TextBlock Text="HELLO WORLD" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</Grid>
However, it is unlikely that your Window will always have the same size, so to make it more dynamic, you could change the layout of the Window as follows:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="YourDesiredSize"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="YourDesiredSize"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="0" Grid.ColumnSpan="3"/>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="2" Grid.ColumnSpan="3"/>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="1" Grid.Column="0"/>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="1" Grid.Column="2"/>
<Grid Grid.Column="1" Grid.Row="1" Background="White" x:Name="contentPlaceHolder">
<TextBlock Text="HELLO WORLD" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
The result of this window placed on top of another looks more or less like this:
and then instead of adding to the MainGrid, add the UserControl to the contentPlaceHolder or however you want to call it:
contentPlaceHolder.Children.Add(uc);
Okay so I found a solution that works for me, I'm sure it's not the best but it might help someone having the same problem as I did.
The problem was that controls within my UserControl that I added to my Window were transparent, although I could not figure out the reason, I found a simple workaround.
By changing the OpacityMask property of the UserControl to whatever the required Background colour is, even if the controls opacity changes, it will be masked with the Brush that you supply.
uc.OpacityMask = Brushes.WhiteSmoke;
Hope it helps someone!
I am wondering If I can use stack panel to get the following layout
one will not be enough, but you can certainly do with two:
<StackPanel Orientation="Vertical">
<BigBoxOnTop />
<StackPanel Orientation="Horizontal">
<SmallBox_1 />
<SmallBox_2 />
<SmallBox_3 />
....
</StackPanel>
</StackPanel>
use margin and padding to place your boxes inside the panels
Yes. The outer one looks like a vertical stackpanel. The smaller boxes (controls or panels) can be placed with explicit margins to lay them out as shown above.
Looks to me like you need to nest a gridpanel inside each of the vertical stack panel's top and bottom halves... but I'm just a beginner at WPF.
try something like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Fill="White" Stroke="Black" Margin="5" StrokeThickness="2"/>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" StrokeThickness="5" Margin="25,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" StrokeThickness="5" Width="100" Height="35" Margin="20,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" Margin="25,0,0,0" StrokeThickness="5"/>
</StackPanel>
</Grid>
I use the stack panel. It looks like every elements inside is stacking tightly. How to leave some margin between them.
Easiest way is to give each item it's own Margin
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" StrokeThickness="5" Margin="5,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" StrokeThickness="5" Width="100" Height="35" Margin="5,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" Margin="5,0,0,0" StrokeThickness="5"/>
</StackPanel>