Like any combobox in WP when the combobox is opened (expanded) it pushes the controls under it down.
In my app when it is opened some of it is hidden because another control is over it.
How can i make all the controls goes down when the combo box is opened.
I want to make like this
What i have is like this
--EDIT
My xaml Code is
<Grid x:Name="addingBabyGrid" HorizontalAlignment="Center" Height="412" VerticalAlignment="Center" Width="323">
<Grid.Background>
<SolidColorBrush Color="White" Opacity="0.9"/>
</Grid.Background>
<StackPanel Orientation="Vertical">
<TextBox HorizontalAlignment="Center" Height="41" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Width="303"/>
<ComboBox HorizontalAlignment="Center" Height="53" Width="298" RequestedTheme="Light" Background="Black">
<ComboBoxItem Content="Male"/>
<ComboBoxItem Content="Female"/>
</ComboBox>
<DatePicker Width="293" HorizontalAlignment="Center" Foreground="White" Background="Black" BorderBrush="#FF7E7E7E" RequestedTheme="Light"/>
</StackPanel>
</Grid>
I think what you should be using is the ListPicker from the Silverlight Toolkit for Windows Phone for the task you need. Also, your issue is mostly that you have set the height of the ComboBox explicitly, which does not allow it to show the other items.
See my code that works as you want:
<Grid x:Name="addingBabyGrid" HorizontalAlignment="Center" Height="412" VerticalAlignment="Center" Width="323">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" HorizontalAlignment="Center" Height="41" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Width="303"/>
<wpToolkit:ListPicker Grid.Row="1" HorizontalAlignment="Center" Width="298">
<ComboBoxItem Content="Male"/>
<ComboBoxItem Content="Female"/>
</wpToolkit:ListPicker>
<DatePicker Width="293" HorizontalAlignment="Center" Foreground="White" Background="Black" BorderBrush="#FF7E7E7E" RequestedTheme="Light"/>
</Grid>
Generally, when using controls like StackPanel and Grid, you do not want to set the height and width of an element, but leave them to be automatically set by either the container, the controls content or both.
Related
I am currently in the process of making a 'Preferences' window in my C# WPF program.
The aim of this window is to have a ListView on the left, and a list of tweakable controls on the right.
Each item in the ListView directly corresponds to a Grid that contains all of the controls under the selected item's content.
Once the item in the ListView is changed, the current grid's visibility must be collapsed, and the grid that corresponds to the item selected's visibility must be changed to visible.
I thought that DataBinding might work for this, however I have no idea how to use it. Could someone please inform me how to implement this feature?
I have only one grid at the moment. The whole window looks like this:
<Window x:Class="DarkOrbit_Skill_Price_Calculator.DarkOrbit_Skill_Price_Calculator___Preferences"
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:DarkOrbit_Skill_Price_Calculator"
mc:Ignorable="d"
Title="DarkOrbit Skill Price Calculator - Preferences" Height="360" Width="640" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Name="ListView_PreferenceOption" Width="150" Margin="5" SelectionChanged="SelectionChanged_ListView_PreferenceOption">
<ListViewItem IsSelected="True">
<StackPanel Orientation="Horizontal">
<Image Source="Images\Installing Updates.png" Height="35"/>
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Margin="5" Name="Grid_Update" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
</Window>
I have absolutely no clue as to how to swap the grid depending on the index selected.
You can bind the visibility of each grid to the selected state of its corresponding list item by referencing the ListViewItem element. Something like this:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="Converter" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Width="150" Margin="5">
<ListViewItem IsSelected="True" x:Name="One">
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
<ListViewItem IsSelected="False" x:Name="Two">
<TextBlock Text="Foo" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
</ListView>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=One, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=Two, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Something Else" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
For those who are having the same predicament and want to use C# code to make this work, I eventually thought of the following code:
StackPanel[] allGrids = { Grid_1, Grid_2, Grid_3, Grid_4, ... }; //Replace StackPanel with the
//type of control you are using, e.g. Grid or WrapPanel.
foreach (StackPanel grid in allGrids)
{
grid.Visibility = Visibility.Collapsed; //collapse all grids
}
allGrids[(your listview/other control).SelectedIndex].Visibility = Visibility.Visible;
//make the grid you need visible
In the textboxes from the code below, the blinking cursor doesn't show even after i click the textbox or when it has focus.I'm posting this big a code because i think perhaps it's the parent element properties that are somehow interfering with the texboxes but I can't seem to find a solution for this. Can someone please help.
<Canvas Name="encounterTab" Style="{StaticResource canvasRecording}" Visibility="Hidden" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" FocusManager.IsFocusScope="True">
<Grid Height="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" Margin="0,0,0,0" FocusManager.IsFocusScope="True">
<DockPanel Style="{StaticResource screenTitleDock}" Grid.Row="0" VerticalAlignment="Top" >
<TextBlock Name="textBlock1" Style="{StaticResource screenTitle}">ENCOUNTER DETAILS</TextBlock>
</DockPanel>
<Grid Style="{StaticResource gridRecording}" SizeChanged="MainGrid_SizeChanged" Name="gridEncDetails" FocusManager.IsFocusScope="True">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="188*"></ColumnDefinition>
<ColumnDefinition Width="149*"></ColumnDefinition>
<ColumnDefinition Width="63*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblApptTime" Content="Time:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="txtTime" GotKeyboardFocus="txtApptTimeKeyBoadFocus" GotMouseCapture="txtApptTime_MouseClick" Grid.Column="1" Grid.Row="0" Width="149" LostFocus="txtApptTime_LostFocus" HorizontalAlignment="Left" MouseDoubleClick="txtApptTime_MouseDoubleClick" Margin="0,11" Height="38" GotTouchCapture="txtApptTime_GotTouchCapture" />
<ComboBox x:Name="ddlAmPm" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="2" Width="55" IsSynchronizedWithCurrentItem="True" Margin="0,10" HorizontalAlignment="Right" Height="38">
<ComboBoxItem>AM</ComboBoxItem>
<ComboBoxItem>PM</ComboBoxItem>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid >
<TextBlock Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Label x:Name="lblNo" Content="No:" Grid.Column="0" Grid.Row="1" Margin="0,11" Height="38" />
<TextBox x:Name="txtEncounterNumber" Grid.Column="1" Grid.Row="1" KeyDown="txtEncounterNumber_KeyUp" TextChanged="txtEncounterNumber_TextChanged" HorizontalAlignment="Left" Width="212" Margin="0,10" Grid.ColumnSpan="2" Height="Auto" />
<Button x:Name="btnNext1" Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource btnRec}" Click="btnNext1_Click" TouchUp="btnTouchNext1_Click" Margin="50,20,50,10" >
<Image Source="Assets/btnNext.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Canvas >
Note:- When i start typing the caret appears but disappears when i clear the textbox values.
It looks like you problem might comes from the ScaleTransform. If a TextBox is scaled to less then it's original size it's cursor disappears. This happens because the TextBox caret is with Width of 1 and when scaled down it becomes less then 1. So it's not visualized at all.
As a workaround make the minimal possible size as default so UI is only scaled up.
Another workaround it to create a custom caret like it's shown here WPF TextBox Inside ViewBox loses Cursor on resize
I am using listbox of images its increasing the memory usage upto giga bytes.I am using this xaml.
<Grid Grid.Row="0" Grid.Column="1">
<ScrollViewer>
<ListBox ItemsSource="{Binding Path=FilterImportSlideCollection}" ItemTemplate="{StaticResource slideItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</ScrollViewer>
</Grid>
And the template is
<DataTemplate x:Key="slideItemTemplate" >
<Grid Width="100" Height="130" Margin="2 2 2 2" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="White" BorderBrush="Black" BorderThickness="1" Grid.Row="0" Panel.ZIndex="3" Canvas.Left="0" Canvas.Right="0">
<Image MinWidth="100" MinHeight="80" HorizontalAlignment="Center" Source="{Binding ImagePath, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"></Image>
</Border>
<TextBlock HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Title}" Foreground="Black"/>
</Grid>
</DataTemplate>
each ImagePath has the path of images like
"https://localhost:2673/SlideThumbnail/1272.png"
Placing the ListBox inside a ScrollViewer disables UI Virtualization meaning all your ListItems are created in memory at once.
try:
<Grid Grid.Row="0" Grid.Column="1">
<ListBox ItemsSource="{Binding Path=FilterImportSlideCollection}" ItemTemplate="{StaticResource slideItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</Grid>
For further information about virtualization have a look at MSDN:
Displaying Large Data Sets
I am new to WPF and suddendly my Window is not clickable anymore.
I cannot click one button and I cannot edit a text box.
I am using Visual Studio 2015 (new to it as well).
What could be the reason?
here some code:
<Window x:Class="Mxx.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:Mxx"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="26*"/>
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="Log out" Click="MenuItem_Click1"/>
<MenuItem Header="Option 2">
<MenuItem Header="Load new control" Click="MenuItem_Click2a"/>
<MenuItem Header="Open new window" Click="MenuItem_Click2b"/>
</MenuItem>
</Menu>
<Border x:Name="Stage" Grid.Row="1"/>
<Grid x:Name="LoginLayer" Background="#FFFFFFFF" Grid.RowSpan="2">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Mxx" Grid.ColumnSpan="2" FontWeight="Bold" HorizontalAlignment="Center" Margin="5" FontSize="20"/>
<TextBlock Text="Name" Grid.Row="1" Margin="3"/>
<TextBox x:Name="txtName" Grid.Row="1" Grid.Column="1" Margin="3" MinWidth="100" HorizontalAlignment="Left"/>
<TextBox x:Name="txtName1" Background="Azure" Grid.Row="4" Grid.Column="1" Margin="3" MinWidth="100" HorizontalAlignment="Left"/>
<TextBlock Text="Password" Grid.Row="2" Margin="3"/>
<PasswordBox x:Name="txtPassword" Grid.Column="1" Grid.Row="2" Margin="3" MinWidth="100" HorizontalAlignment="Left"/>
<Button Click="Login_Click" Content="Log in" Grid.Row="3" Grid.Column="1" Margin="3"/>
</Grid>
<TextBlock x:Name="lat1" Text="lat" Grid.Row="4" Margin="3" />
</Grid>
</Grid>
and here my main window
public MainWindow()
{
InitializeComponent();
_geoLocator = new Geolocator();
Utils.getNetworkAdapterId();
Debug.WriteLine("imei: " + Properties.Settings.Default.imei);
Properties.Settings.Default.imei = "imei1";
Properties.Settings.Default.Save(); // Saves settings in application setting
}
my debugger hits the last line
Your problem is with the last declared TextBlock
<TextBlock x:Name="lat1" Text="lat" Grid.Row="4" Margin="3" />
That is outside of the grid that has row and column definitions, and so it is defaulting to taking up all the space in the page as an overlay. You are unable to give focus to the controls beneath it.
You can see this in the XAML editor window. In the code view, click on that element, and in the designer you will see that the textblock is the full size of your window. Because it is declared last in the XAML, it take the uppermost position (z-index) and therefore "hides" the controls behind it.
You have a TextBlock covering the other controls. I think you want to move lat1 into the /Grid tag directly above it.
I am new to the WPF.
I wanted to create a UserControl which contains two fields for example
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="189*"/>
<ColumnDefinition Width="328*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="53*"/>
<RowDefinition Height="64*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="141*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="Name:" VerticalAlignment="Center"/>
<TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Center" Width="120" Grid.Column="1" Margin="3,0,0,0"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="Age:" VerticalAlignment="Center" Grid.Row="1"/>
<TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Center" Width="120" Grid.Row="1" Grid.Column="1" Margin="3,0,0,0"/>
<Button Content="Add Person" HorizontalAlignment="Left" VerticalAlignment="Center" Width="75" Grid.Row="2" Grid.Column="1"/>
</Grid>
I wanted to create my user control in such a way that other developers(Who uses my usercontrol) can be able to add extra fields to it.
Imagine a developer want to add "Address filed to the above control".
If any one have sample articles on this please provide me.
I think you are after ContentControl. See below article for an example.
The ContentControl can contain any type of common language runtime
object (such as a string or a DateTime object) or a UIElement object
(such as a Rectangle or a Panel). This enables you to add rich content
to controls such as Button and CheckBox.
How to Embed Arbitrary Content in a WPF Control