this is what my program looks like in my editor
this is a screen shot from the tablet my program is running on.
The xaml for said code is this
<Window x:Class="DLIUnitLibrary_WPF.ConfigureWindowLandscape"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DLIUnitLibrary_WPF"
xmlns:posButton="clr-namespace:DLIUnitLibrary_WPF.Buttons"
xmlns:UnitImagePanels="clr-namespace:DLIUnitLibrary_WPF.UnitImagePanels"
Background="{DynamicResource formBackground}"
Width="800"
Height="480"
WindowState="Maximized"
WindowStyle="None"
Loaded="Window_Loaded">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Viewbox Margin="10">
<DockPanel x:Name="mainView"
Height="480"
Width="800">
<local:DLIHeader DockPanel.Dock="Top"
Visibility="Hidden" />
<WrapPanel Width="125"
ItemHeight="125"
ItemWidth="125"
Margin="0,5,0,0"
DockPanel.Dock="Right"
Orientation="Vertical"
VerticalAlignment="Bottom">
<posButton:OposButton x:Name="msrButton"
Margin="5"
ImageSource="Images/msr_keymon.png" />
<posButton:OposButton x:Name="imagerButton"
Margin="5"
ImageSource="Images/barcode_keymon.png" />
<posButton:OposButton x:Name="brightButton"
Margin="5"
ImageSource="Images/brightness_keymon.png" />
</WrapPanel>
<Grid Margin="10">
<Viewbox x:Name="tablet9viewbox"
Visibility="Hidden">
<UnitImagePanels:Tablet9Image />
</Viewbox>
<Viewbox x:Name="tablet7viewbox" Visibility="Hidden">
<UnitImagePanels:Tablet7Image>
<UnitImagePanels:Tablet7Image.LayoutTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="90" />
<TranslateTransform />
</TransformGroup>
</UnitImagePanels:Tablet7Image.LayoutTransform>
</UnitImagePanels:Tablet7Image>
</Viewbox>
</Grid>
</DockPanel>
</Viewbox>
</Window>
The screen resolution on the tablet7 is 800x480. The tablet has a emulated 800x600 and when I up it to that I can see all 3 buttons.
The screen resolution on the tablet9 is 1024x768 and does not have the 2 button problem infact it renders it perfectly. What am I missing?
EDIT
I forgot about my code behind, sorry about that. It doesn't too to much on the OnLoadedevent, but it is here
private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.mainView.Height = System.Windows.SystemParameters.PrimaryScreenHeight;
this.mainView.Width = System.Windows.SystemParameters.PrimaryScreenWidth;
switch (DLIUnitFinder.GetDLIUnit())
{
case DLIUnit.tablet7:
this.tablet7viewbox.Visibility = System.Windows.Visibility.Visible;
break;
case DLIUnit.tablet9:
this.tablet9viewbox.Visibility = System.Windows.Visibility.Visible;
break;
}
}
For anyone else that is experiancing a similar problem it appears that Clipping is allowed with WrapPanel. I changed to the panel that has those 3 buttons in it from WrapPanel to UniformGrid and the buttons are now showing as they should.
Related
I would like to implement a userControl which is able to scroll and zoom with provided mouse input.
Therefore, I implemented following user Control. (If its working I am going to move the Events directly to the Model)
ScrollDragZoomControl.xaml
<UserControl x:Class="MinimalMonitoringClient.Controls.ScrollDragZoomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:models="clr-namespace:MinimalMonitoringClient.Controls.Models"
Background="Transparent">
<UserControl.DataContext>
<models:ScrollDragZoomViewModel />
</UserControl.DataContext>
<ScrollViewer x:Name="scrollViewer"
MouseLeftButtonUp="scrollViewer_MouseLeftButtonUp"
PreviewMouseLeftButtonUp="scrollViewer_PreviewMouseLeftButtonUp"
PreviewMouseWheel="scrollViewer_PreviewMouseWheel"
PreviewMouseLeftButtonDown="scrollViewer_PreviewMouseLeftButtonDown"
MouseMove="scrollViewer_MouseMove"
VerticalScrollBarVisibility="{Binding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{Binding HorizontalScrollBarVisibility}">
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform />
</TransformGroup>
</Grid.LayoutTransform>
<Viewbox>
<!-- Present the actual stuff the user wants to display -->
<ContentPresenter />
</Viewbox>
</Grid>
</ScrollViewer>
In another UserControl I would like to use this UserControl so show Content which could be bigger than the current UserControl's width and height. For Testing I set Width and Height to something huge.
<UserControl x:Class="MinimalMonitoringClient.Panels.HierarchicalView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:panels="clr-namespace:MinimalMonitoringClient.Models.Panels"
xmlns:controls="clr-namespace:MinimalMonitoringClient.Controls">
<UserControl.DataContext>
<panels:HierarchicalViewModel />
</UserControl.DataContext>
<controls:ScrollDragZoomControl>
<Image Source="/Images/Information.png" Width="2000" Height="2000" IsHitTestVisible="False" />
</controls:ScrollDragZoomControl>
No Events are called in the ScrollDragZoomControl. I set the
Background to transparent. Also played with IsHitTestVisible.
The Scrollbars are not visible.
When you set the Content property of the UserControl to an Image element you effectively "override" any content that you have defined in ScrollDragZoomControl.xaml.
You probably want the ScrollViewer and the rest of the stuff you have defined in ScrollDragZoomControl.xaml to be part of the UserControl's template:
<UserControl x:Class="MinimalMonitoringClient.Controls.ScrollDragZoomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:models="clr-namespace:MinimalMonitoringClient.Controls.Models"
Background="Transparent">
<UserControl.DataContext>
<panels:HierarchicalViewModel />
</UserControl.DataContext>
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<ScrollViewer x:Name="scrollViewer"
MouseLeftButtonUp="scrollViewer_MouseLeftButtonUp"
PreviewMouseLeftButtonUp="scrollViewer_PreviewMouseLeftButtonUp"
PreviewMouseWheel="scrollViewer_PreviewMouseWheel"
PreviewMouseLeftButtonDown="scrollViewer_PreviewMouseLeftButtonDown"
MouseMove="scrollViewer_MouseMove"
VerticalScrollBarVisibility="{Binding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{Binding HorizontalScrollBarVisibility}">
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform />
</TransformGroup>
</Grid.LayoutTransform>
<Viewbox>
<!-- Present the actual stuff the user wants to display -->
<ContentPresenter />
</Viewbox>
</Grid>
</ScrollViewer>
</ControlTemplate>
</UserControl.Template>
</UserControl>
There is my code. I see the video in the top right corner, where control itself is located, but the main grid background is empty. It's supposed to take video through VisualBrush, right? I've googled few samples and they all use the same trick, but it doesn't work...
I've also tried to put some controls on top of the control, but nothing shows through, because I assume it's using WinForms control inside, which is top-most.
So how do I get this video as the background?
<Grid>
<vlc:VlcControl x:Name="myVlcControl" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top" />
<Grid>
<Grid.Background>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<Image Source="{Binding VideoSource, ElementName=myVlcControl}" />
</VisualBrush.Visual>
</VisualBrush >
</Grid.Background>
</Grid>
MediaElement supports RTSP just fine, but it may not support the encoding/container you're trying to work with. The following produces a working streaming MediaElement, and uses a VisualBrush to paint the background of a Grid with the MediaElement:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<MediaElement x:Name="MyPlayer"
Width="640"
Height="480"
LoadedBehavior="Play"
Source="rtsp://granton.ucs.ed.ac.uk/domsdemo/v2003-1.wmv" />
<Grid Grid.Row="1"
Width="320"
Height="240">
<Grid.Background>
<VisualBrush Stretch="Uniform" Visual="{Binding ElementName=MyPlayer}" />
</Grid.Background>
</Grid>
</Grid>
#Kolorowezworki made Airhack control to workaround this issue.
Example:
<airhack:AirControl DataContext="{Binding}">
<airhack:AirControl.Front>
<Image Source="{Binding VideoSource, ElementName=myVlcControl}" />
</airhack:AirControl.Front>
<airhack:AirControl.Back>
<vlc:VlcControl x:Name="myVlcControl" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top" />
</airhack:AirControl.Back>
</airhack:AirControl>
NOTE: By default AirControl does't support DataContext Binding, to solve this issue fork or copy repository and implement DataContext support by passing it 'airhack' window.
Example:
public AirControl()
{
InitializeComponent();
alpha = new Alpha(this);
alpha.DataContext = DataContext;
DataContextChanged += (sender, args) => alpha.DataContext = DataContext;
}
what i am trying to do is create a Desktop application in WPF whose UI is such that a small icon will remain fixed in the center of the left edge of screen and on click(or maybe hover) will slide open a sidebar(like the google desktop bar) running along the left edge of the screen (fixed position, cannot be moved).
do note that what i'm asking for might be like an appbar but i do not want the desktop icons along the left edge to be moved as it happens with an appbar i.e. i do not want it to hog up the desktop spacce....can anyone please suggest me a way out ??
I have implemented a partial solution using this, but i cant get the slide animation and fixed position to workout
Something like this could work:
then of course you could create a slide in animation for the sidebar. This shows (partial) transparency and the switching principle.
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStyle="None" Topmost="True" WindowState="Maximized"
AllowsTransparency="True" Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Name="rect" Width="100" VerticalAlignment="Stretch" Fill="#99000000" Visibility="Collapsed" />
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Width="32" Height="32" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Background="White" Click="Button_Click">></Button>
</Grid>
</Window>
C#:
private void Button_Click(object sender, RoutedEventArgs e)
{
if (rect.Visibility == System.Windows.Visibility.Collapsed)
{
rect.Visibility = System.Windows.Visibility.Visible;
(sender as Button).Content = "<";
}
else
{
rect.Visibility = System.Windows.Visibility.Collapsed;
(sender as Button).Content = ">";
}
}
Based on this answer and more answers on this site I made a side bar, I liked the result so i made a repo.
https://github.com/beto-rodriguez/MaterialMenu
you can install it from nuget too.
here is an example
<materialMenu:SideMenu HorizontalAlignment="Left" x:Name="Menu"
MenuWidth="300"
Theme="Default"
State="Hidden">
<materialMenu:SideMenu.Menu>
<ScrollViewer VerticalScrollBarVisibility="Hidden">
<StackPanel Orientation="Vertical">
<Border Background="#337AB5">
<Grid Margin="10">
<TextBox Height="150" BorderThickness="0" Background="Transparent"
VerticalContentAlignment="Bottom" FontFamily="Calibri" FontSize="18"
Foreground="WhiteSmoke" FontWeight="Bold">Welcome</TextBox>
</Grid>
</Border>
<materialMenu:MenuButton Text="Administration"></materialMenu:MenuButton>
<materialMenu:MenuButton Text="Packing"></materialMenu:MenuButton>
<materialMenu:MenuButton Text="Logistics"></materialMenu:MenuButton>
</StackPanel>
</ScrollViewer>
</materialMenu:SideMenu.Menu>
</materialMenu:SideMenu>
I've been needing to use a numeric up-down control for my WPF app. I read a similar question posted here and tried using the one available here > http://bot.codeplex.com/.
I added the references and referenced it in my XAML window
xmlns:lib="clr-namespace:PixelLab.Wpf;assembly=PixelLab.Wpf"
and did this.
<lib:NumericUpDown Name="year"></lib:NumericUpDown>
and keep getting the error: 'nud' is an undeclared namepsace.
I'm very new to WPF so any help would be appreciated.
The Extented WPF Toolkit has one: NumericUpDown
Just combine a TextBox with a veritical fixed-height ScrollBar like this:
<Grid Height="80">
<TextBox x:Name="part_TextBox" Text="{Binding Value,ElementName=part_Scrollbar,StringFormat={}{0:F6},Mode=TwoWay}" MaxLength="11" VerticalAlignment="Center" VerticalContentAlignment="Center" FontSize="24" Height="40"/>
<ScrollBar x:Name="part_Scrollbar" Orientation="Vertical" Minimum="0" Maximum="100" BorderBrush="{x:Null}" SmallChange="0.1" Height="32" Margin="8 4" VerticalAlignment="Stretch" Grid.Column="1" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right">
<ScrollBar.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</ScrollBar.RenderTransform>
</ScrollBar>
</Grid>
Bindings for Maximum & Minimum & SmallChange/Increment are directly avaliable.
Vanilla XAML (no additions or packages) implementation:
<Window x:Class="Spinner.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Spinner"
mc:Ignorable="d"
ResizeMode="CanMinimize" SizeToContent="WidthAndHeight" Title="Scroll Spinner">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- The button exists just to have something other than the spinner be the object of focus. -->
<Button Content="Reset" TabIndex="0"/>
<!-- The spinner is just a scroll bar overlaying a text box (same tab indices). -->
<!-- Only the scroll bar is named (in order to get its value); the text box just relfects the scroll bar's value. -->
<TextBox GotFocus="TextBox_GotFocus" Grid.Row="1" Height="{Binding ElementName=SpinnerScr, Path=ActualHeight}" HorizontalAlignment="Stretch" IsReadOnly="True" TabIndex="1" Text="{Binding ElementName=SpinnerScr, Path=Value, StringFormat={}{0:####0}}" TextAlignment="Center"/>
<ScrollBar x:Name="SpinnerScr" Background="Transparent" Focusable="True" Grid.Row="1" Height="20" LostFocus="SpinnerScr_LostFocus" Margin="0,3" Maximum="999" Orientation="Horizontal" SmallChange="1" TabIndex="1" Visibility="Hidden"/>
<x:Code>
<![CDATA[
void SpinnerScr_LostFocus(object sender, RoutedEventArgs e) {
SpinnerScr.Visibility = Visibility.Hidden;
}
void TextBox_GotFocus(object sender, RoutedEventArgs e) {
SpinnerScr.Visibility = Visibility.Visible;
SpinnerScr.Focus();
}
]]>
</x:Code>
</Grid>
</Window>
using System.Windows;
namespace Spinner {
public partial class MainWindow : System.Windows.Window {
public MainWindow() {
InitializeComponent();
}
}
}
When the scroll bar (or text box) has focus, the scroll elements are visible. On loss of focus, only the text box is visible. Only the scroll bar may be accessed in any code-behind.
I want that the user can resize a control by draging a resize-grip on the lower right border. With the ResizeGrip there seems to exists the perfect control for achieving this, but I don't see what is the plan to use this control. It does not derive from Thumb (however in msdn is written that it is an "implementation" of it), and does also not support the routed events of Thumb.
What is it correct usage of the ResizeGrip-control.
Update:
I've played around with ResizeGrip and I have experienced a lot of weird problems using it.
The most hard problem was that, using the ResizeGrip in a window that shows also a native ResizeGrip in the bottom right corner (ResizeMode="CanResizeWithGrip"), the window has begun to react really strange on mouse-input. In the end, I have disclaimed to use it.
As a simple alternative, you can use the Thumb-control and attach it an appropriate Template.
Ok, I got bored last night and wrote a little sample for you using Thumb. You should be able to Copy/Paste/Compile/Run.
But basically, I created a UserControl named DialogReplica, just something that looks like a dialog with a grip, you can see it thrown in the main window.
<Window x:Class="ResizeGrip.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ResizeGrip="clr-namespace:ResizeGrip"
Title="MainWindow" Height="350" Width="525">
<Canvas>
<ResizeGrip:DialogReplica Canvas.Top="25" Canvas.Left="100"/>
</Canvas>
Here's the xaml for the UserControl (you mostly interested in the Thumb part):
<UserControl x:Class="ResizeGrip.DialogReplica"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border x:Name="Border" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#FF626161" BorderThickness="2" CornerRadius="3">
<DockPanel x:Name="sizableContent" Background="LightGray" Focusable="False" LastChildFill="True" MinHeight="100" MinWidth="100">
<Border DockPanel.Dock="Top" Background="Gray" Height="30">
<DockPanel>
<Button DockPanel.Dock="Right" Width="16" Height="16"
VerticalAlignment="Center" HorizontalAlignment="Center"
VerticalContentAlignment="Top" HorizontalContentAlignment="Center"
Margin="0,0,4,0" Background="Transparent">
<Button.Content>
<Grid>
<Line X1="1" Y1="1" X2="8" Y2="8" Stroke="White" StrokeThickness="1"/>
<Line X1="1" Y1="8" X2="8" Y2="1" Stroke="White" StrokeThickness="1"/>
</Grid>
</Button.Content>
</Button>
<TextBlock Text="Pretend Dialog" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DockPanel>
</Border>
<DockPanel DockPanel.Dock="Bottom" HorizontalAlignment="Stretch">
<Thumb DockPanel.Dock="Right" VerticalAlignment="Bottom" Margin="0,0,1,1"
DragDelta="OnResizeThumbDragDelta"
DragStarted="OnResizeThumbDragStarted"
DragCompleted="OnResizeThumbDragCompleted">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom" >
<Line X1="6" Y1="18" X2="18" Y2="6" Stroke="DarkGray" StrokeThickness="1.5"/>
<!--smallest/right|bottom most -->
<Line X1="10" Y1="18" X2="18" Y2="10" Stroke="DarkGray" StrokeThickness="1.5"/>
<Line X1="14" Y1="18" X2="18" Y2="14" Stroke="DarkGray" StrokeThickness="1.5"/>
<!--longers/left|top most-->
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="SizeNWSE"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Thumb.Style>
</Thumb>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Margin="12" Width="75" TabIndex="1" Content="Ok"/>
</StackPanel>
</DockPanel>
<StackPanel HorizontalAlignment="Center" Margin="16,16,16,4">
<TextBlock Text="Drag the lower right corner to resize."/>
</StackPanel>
</DockPanel>
</Border>
finally, here's the code behind for the UserControl
public partial class DialogReplica : UserControl
{
private Cursor _cursor;
public DialogReplica()
{
InitializeComponent();
}
private void OnResizeThumbDragStarted(object sender, DragStartedEventArgs e)
{
_cursor = Cursor;
Cursor = Cursors.SizeNWSE;
}
private void OnResizeThumbDragCompleted(object sender, DragCompletedEventArgs e)
{
Cursor = _cursor;
}
private void OnResizeThumbDragDelta(object sender, DragDeltaEventArgs e)
{
double yAdjust = sizableContent.Height + e.VerticalChange;
double xAdjust = sizableContent.Width + e.HorizontalChange;
//make sure not to resize to negative width or heigth
xAdjust = (sizableContent.ActualWidth + xAdjust) > sizableContent.MinWidth ? xAdjust : sizableContent.MinWidth;
yAdjust = (sizableContent.ActualHeight + yAdjust) > sizableContent.MinHeight ? yAdjust : sizableContent.MinHeight;
sizableContent.Width = xAdjust;
sizableContent.Height = yAdjust;
}
}