so I'm trying to make a program that allows users to design simple programs using modules with different functions in WPF.
I've created custom controls for my modules that look like this:
<Border Height="75" Width="150" BorderThickness="1" BorderBrush="Black">
<Grid Background="Gray" Height="75" Width ="150">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Label Content="Double" FontSize="12" Grid.Row="0" HorizontalContentAlignment="Center" Background="Aquamarine"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Name="IncomingConnection" Height="15" Width="15" Background="Black" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Button Name="OutgoingConnection" Grid.Column="2" Height="15" Width="15" VerticalAlignment="Top" Background="Black" Margin="5" HorizontalAlignment="Right"/>
<Button Name="OutgoingData" Grid.Column="2" Height="15" Width="15" VerticalAlignment="Bottom" Background="Aquamarine" Margin="5" HorizontalAlignment="Right"/>
</Grid>
</Grid>
</Border>
Anyways, I want to be able to click on one of these buttons (incomingConnection or outgoingConnection), and have a line connect the two buttons.
Other information: The custom controls are all being placed inside thumbs so they can be dragged around. Everything is on a canvas. I don't want to create a line between the controls, but instead between the buttons on the controls.
Thanks a ton!
I would have a class for the lines that contains the x and y coordinates for both endpoints. I would put an instance for each line in to a list on the view model. Then use an ItemsControl bound to that property with a Canvas as the template. You can then use a WPF Line control as the ItemTemplate for the ItemsControl. You can bind the Line control's X1, Y1, X2, and Y2 to the endpoint properties of the line class that was created at the beginning.
With that setup, all you have to do is add instances of your line class to the list and they will automatically show up on the Canvas.
Related
I am working on a Phone Dialer UWP application for Windows Mobile devices. In searching for dialer examples, I came across the PhoneCall sample that is bundled with Windows Universal Samples at https://github.com/Microsoft/Windows-universal-samples. The PhoneCall sample contains an example implementation of Dialer and a DialerPanel, complete with a text box to display or edit the number being typed, as well as the Call button. So far so good.
However, the sample dialer panel is hosted as a PivotItem in a tabbed interface implemented by MainPage.xaml, and it occupies the entire space available to it.
What I am looking for is something like a DialerPanel in the sample, but one that could shrink to fit in my Grid cell. I will have the available space split into two Grid cells, with the upper half occupying a custom control or an image, while the lower half will host the Dial Pad.
In my attempt to accomplish what I need, I modified the sample DialerPanel.xaml as follows:
I created a new outer Grid with two rows, each taking up 50% of the available space.
In the upper row, I added a rectangle with a fill of "Light Yellow"
In the lower row, I added the original Dialer Panel layout contained in a Grid (basically, I moved the ORIGINAL Grid into a Grid cell at Row 1, Column 0.
Below is the image of my XAML outline (with certain blocks collapsed for clarity):
Here's the XAML:
<UserControl
x:Class="PhoneCall.Controls.DialerPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhoneCall.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Rectangle Fill="LightYellow" Grid.Row="0"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<local:LinePicker Margin="0,20,0,0"/>
<Grid Style="{StaticResource DigitViewGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="dialerNumberControlScrollviewer"
Grid.Column="0"
Style="{StaticResource DigitViewScrollerStyle}">
<TextBlock Style="{StaticResource DigitViewTextStyle}"
SizeChanged="OnDialerNumberControlSizeChanged"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}">
</TextBlock>
</ScrollViewer>
<Button Grid.Column="1"
Command="{Binding ProcessBackspace}"
IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Holding="OnBackspaceHolding">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="30"/>
</Button>
</Grid>
</StackPanel>
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
<StackPanel Style="{StaticResource DialpadPanelStyle}">
<local:Dialpad x:Name="Dialpad"/>
<Button IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Style="{StaticResource AccentLongButtonStyle}"
Command="{Binding ProcessDialDialerNumberHeap}" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<CompositeTransform ScaleX=".75" ScaleY=".75"/>
</FontIcon.RenderTransform>
</FontIcon>
<TextBlock Text="Call"
Grid.Row="1"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="0,4,0,0"
LineHeight="14"
HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</UserControl>
When I build the app with the changes above and run the sample, this is how it appears on the phone with my rectangle covering the Dial Pad:
I tried a couple of things including reduced fixed width and height for the Dialer Panel, but I could not make it work.
A couple of questions:
1. What am I doing wrong here and how can I fix it?
2. Is there a third party DialPad control (free or paid) that I can reference in my project and just use it?
Thanks for all your help!
I think the problem is in this line:
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
This stack panel starts in row 0 where you the put
<StackPanel Grid.Row="0">
Can you try this?
<StackPanel Grid.Row="2" VerticalAlignment="Bottom">
I have a DataTemplate like this:
<!-- MULTI VIEW TEMPLATE -->
<DataTemplate x:Key="MultiViewTemplate" >
<Grid x:Name="MultiViewGrid" ShowGridLines="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Content="{StaticResource BorderHwnd1}" Grid.Column="0" Grid.Row="0" x:Name="MultiViewBorder1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder1_MouseDoubleClick"/>
<ContentControl Content="{StaticResource BorderHwnd2}" Grid.Column="1" Grid.Row="0" x:Name="MultiViewBorder2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder2_MouseDoubleClick"/>
<ContentControl Content="{StaticResource BorderHwnd3}" Grid.Column="0" Grid.Row="1" x:Name="MultiViewBorder3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder3_MouseDoubleClick"/>
<ContentControl Content="{StaticResource BorderHwnd4}" Grid.Column="1" Grid.Row="1" x:Name="MultiViewBorder4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder4_MouseDoubleClick"/>
</Grid>
</DataTemplate>
And the BorderHwnd1 is like this:
<Border x:Key="BorderHwnd1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" >
<Image Margin="1" Source="/MyProject;component/Images/No_image_available.png" />
</Border>
My problem is that MultiViewBorder1_MouseDoubleClick event does not work after I remove and assign programmatically a new child to MultiViewBorder1. Initially MultiViewBorder1.Child is an image (No_image_available.png). In my code, I remove the image and assign a new child. This new child is a HwndHost.
Where is my mistake? any help is appreciated!
The child is changing from a WPF Image control....which is able to raise/flow "routed" "mouse" events through the visual tree....to some "hwnd" which you have inside the HwndHost, which is handling raw WIN32 mouses messages....and doesn't route them.
To be able to get mouse activity in your HwndHost into the visual tree, you could use a few different techniques to get them routed.
have an overlayed "transparent" window
handle the "mouse" messages in your WIN32/Hwnd, and then use "delegates" to raise
How can I convert Win32 mouse messages to WPF mouse events?
WPF WIN32 hwndhost WM_MOUSEMOVE WM_MOUSEHOVER
I'm trying to make text editor for Windows (PC) in UWP but the scaling is not working, I've done the same in WPF and it worked.
The page size is set to 800x600, these are columns:
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="filename" Margin="10" Grid.ColumnSpan="2">Untitled</TextBlock>
<Border Margin="5" Grid.Row="1">
<TextBox x:Name="text" AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible" TextChanged="text_TextChanged"/>
</Border>
<StackPanel Grid.Row="2" Margin="3,3" Orientation="Horizontal" MinHeight="31" >
<Button x:Name="saveButton" FontSize="15" Content="Save" Margin="0,0,0,-0.125" VerticalAlignment="Top" Click="saveButton_Click" />
<Button x:Name="button" Content="Save as..." Margin="5,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="button_Click" />
<Button x:Name="loadButton" FontSize="15" Content="Read" Margin="5,0" VerticalAlignment="Bottom" Click="loadButton_Click"/>
</StackPanel>
</Grid>
Title is in 1st row, content is in 2nd, buttons (save, load) are in 3rd, it looks like grid it wouldn't exist:
That's with normal size
After size change
How do I fix it?
The page size is set to 800x600
If you've set the page size to 800x600 like this: <Page Width="800" Height="600"... it will always be 800x600 and it will not scale. If you want it to scale properly, just don't set these properties.
I assume you wanted to set the size of the app when it starts for the first time. You can approach it by setting the ApplicationView.PreferredLaunchViewSize.
Also I recommend to use the RichEditBox to display and edit text files.
I cant figure out what I am doing wrong I have a grid with 2 columns and 3 rows. In the left column I have a textblock and textbox and a listbox which is all good.
The right column gets a little more complicated where I have a tabcontrol to start. Then my TabItem and inside that I have my Main Grid and then inside that I have 2 grids. Which are grdDetailsTop and then grdDetailsBottom.
grdDetailsTop has 3 columns where the left will be an image with a Border the middle should be Member Code: 'TextBox' and under that should be Family Code: 'TextBox' and then finally under that I would like to place Balance: 'TextBox'
The way I tried it was, I have grdDetailsTop Grid with 3 columns in the first column I placed a groupbox and inside that I have a stackpanel.
Second Column is where I am having trouble I placed a Stackpanel with the orientation Horizontal and grid.Column="1" but my textblocks are going into the 3rd column without me telling them too. Sorry for the bad explanation but the code is posted hopefully you can help. Also the reason for my different Panels is so I can place a border around each column of the grdDetailsTop.
Thanks
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="100*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="Search Member" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
<TextBlock Text="Member Details" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
<TextBox Name="txtMEMSearch" Background="Orange" Grid.Column="0" Grid.Row="1"></TextBox>
<ListBox Name="lstSearchMembers" Grid.Row="2"
BorderBrush="Black" DisplayMemberPath="Name"
ItemsSource="{Binding ElementName=bindingToObject,
Path=Clients}" />
<TabControl Name="mainTabControl" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="5">
<TabItem Header="Member Details" Name="memDetailTab">
<Grid Name="mainTabGrid">
<Grid Name="grdDetailsTop" Height="175" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GroupBox Header="Picture">
<StackPanel>
<Image Height="125" Width="125"></Image>
</StackPanel>
</GroupBox>
*************PROBLEM AREA******************
<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock
VerticalAlignment="Top"
Margin="5"
Height="25">Member Code:</TextBlock>
<TextBlock
VerticalAlignment="Top"
Margin="5"
Width="75"
Height="25"></TextBlock>
<TextBlock
Margin="5"
Height="25"
Width="100">Family Code:</TextBlock>
<TextBlock
Margin="5"
Width="75"
Height="25"></TextBlock>
<TextBlock
VerticalAlignment="Bottom"
Margin="5"
Height="25"
Width="100">Balance Due:</TextBlock>
<TextBlock
Margin="5"
VerticalAlignment="Bottom"
Width="75"
Height="25"></TextBlock>
</StackPanel>
******************************************
</Grid>
<Grid Name="grdDetailsBottom">
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Page>
You're missing the VerticalAlignment = "Top" on that TextBlock, and therefore, it is defaulting to Stretch which will center the text in the available vertical space. If you set that property, you'll see that it moves back up to be in line with the other TextBoxes in the same StackPanel.
It isn't actually moving that TextBox into the next column, rather, you've defined a fixed width of the column it is in (in this case, column 1 with a width of 200). But the contents of that column (the StackPanel are more than 200 units wide, so they push over into the next grid column. To keep all the TextBoxes in column 1, you'll either need to widen the column so they can fit, shrink the size of the TextBoxes or set the width Auto so it will automatically size itself to its contents. If you look at it, you're taking up 175 units with TextBlocks 2 and 3, leaving only 25 units for the rest of the TextBlocks in that StackPanel. There's just not enough space.
<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
... other text boxes ...
</StackPanel>
This will fix the vertical layout issue, but not the Horizontal layout issue. That requires changes to the grid column sizing or the size of the contents.
Per your comment below, I believe you're looking for the WrapPanel which will automatically wrap items to the next line (horizontal or vertical) when it runs out of space.
<WrapPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
... other text boxes ...
</WrapPanel>
This layout certainly looks nicer. But - I don't know your specific requirements, however rather than using a WrapPanel with fixed margins and sizes, I would recommend using a Grid with ColumnDefinitions and RowDefinitions to organize items in this type of layout. The Grid offers a much greater level of flexibility and allows for items to automatically resize based on system font sizes, a user resizing your view and other factors out of your control. If you are setting fixed heights/widths, you lose that flexibility. Again, I don't know you're requirements, so perhaps this is the best solution for you, but under most circumstances, I'd highly recommend a Grid instead.
I have a user control which contains a media element to play a video, a slider used as a trackbar for the video and a text block that display the title of the video. These 3 controls are placed in a grid which in turn is placed inside a border.
I want the user to be able to translate, rotate and scale this control. The problem is that when the control scales it's content scales also and i want the slider control not to scale. Is it possible to somehow keep the slider control from scaling?
I should also mention that the manipulation of the control is handled by setting the control ismanipulationenabled to true and using the manipulation delta event.
EDIT:
This is how the xaml for the control looks like:
<Grid Name="movieGrid" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="moviePlayerBorder" Background="Black" BorderBrush="Blue" BorderThickness="2,2,2,2" CornerRadius="5,5,5,5" Grid.RowSpan="2">
<Grid Name="contentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WinControls:MediaElement x:Name="movieDisplay" ScrubbingEnabled="True" IsEnabled="True" Grid.RowSpan="2"
LoadedBehavior="Manual" UnloadedBehavior="Manual"
MediaOpened="movieDisplay_MediaOpened">
</WinControls:MediaElement>
<Image x:Name="btnPlay" Grid.Row="1" Height="60" Width="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="120,44,112,43" Grid.RowSpan="2">
</Image>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch" Margin="6,2,6,0" Grid.Row="0">
<TextBlock Text="test" Margin="0,0,0,0" Name="txtBlockTitlu" HorizontalAlignment="Stretch"
FontSize="14" VerticalAlignment="Top" Foreground="White" TextWrapping="Wrap" Visibility="Collapsed"/>
</DockPanel>
</Grid>
</Border>
<Slider x:Name="seekBar" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="299"
Thumb.DragStarted="seekBar_DragStarted" Thumb.DragCompleted="seekBar_DragCompleted" Thumb.DragDelta="seekBar_DragDelta" MaxHeight="33"
Minimum="0" Maximum="286" Height="33" Margin="0,0,0,0" Grid.Row="1"/>
</Grid>
if you want to build a fully scaleable user control you should define the layout only with the size values of a row column / row row eg. auto, x* or fixed values (if realy needed).
do not use fixed size values on elements.