I have some controls in my xaml file of my c++ universal application. I want to access the elements and set some property values.
<PivotItem Header="Home">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Padding="8,8,8,8">
<TextBlock Margin="8" Text="A"/>
<Border Margin="8,0,0,0" HorizontalAlignment="Left" BorderBrush="Gray" BorderThickness="2" Grid.Row="0">
<TextBox x:Name="controlA" x:Uid="controlA" HorizontalAlignment="Left" Width="160" Text="100 kHz" IsEnabled="False" IsReadOnly="True"/>
</Border>
</StackPanel>
</Grid>
</PivotItem>
Is it possible to access my controls programmatically.
I did it finally as below following the accepted answer:
//Code For a text box
for (auto&& child : tstStack->Children)
{
TextBlock^ temp = dynamic_cast<TextBlock^>(static_cast<Object^>(child));
}
In addition to the x:Name name that is promoted to a field in your class, you can walk the tree using element-specific properties. For example, StackPanel->Children returns a collection of child elements that you can add, remove, enumerate, etc.
Related
I'm trying to add a border to some controls in XAML - the problem is, whenever I apply wrapping a certain element it wraps the whole window, probably on the first grid element?
This also happens when I try to use it around the WebBrowser. Any suggestions?
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RAT-t00l" Height="850" Width="700">
<Grid x:Name="BigGrid" HorizontalAlignment="Right" Width="682">
<TextBox Name="txt_Log" HorizontalAlignment="Left" Height="657" Margin="4,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="417" IsReadOnly="True"/>
<Button Name="btn" Click="btn_Connect_Click" Background="LightGreen" Content="Connect" HorizontalAlignment="Left" Margin="266,680,0,0" VerticalAlignment="Top" Width="75"/>
<Button Name="btn_disc" Click="btn_Disconnect_Click" Background="Pink" Content="Disconnect" HorizontalAlignment="Left" Margin="346,680,0,0" VerticalAlignment="Top" Width="75"/>
<Button Name="btn_fetch" Click="btn_Fetch_Click" Content="Fetch data" HorizontalAlignment="Left" Margin="266,707,0,0" VerticalAlignment="Top" Width="155" Height="24"/>
<Button Name="btn_eraseLog" Click="btn_EraseLog_Click" Content="Erase log from target" HorizontalAlignment="Left" Margin="266,736,0,0" VerticalAlignment="Top" Width="155" Height="25"/>
<WebBrowser
Name="map"
HorizontalAlignment="Left"
Height="347"
Margin="426,10,0,0"
VerticalAlignment="Top"
Width="246"
LoadCompleted="wb_LoadCompleted"
/>
Here's the border. Meaning to wrap only the grid inside.
<Border Name="mask" CornerRadius="20" Height="auto" Width="auto" BorderThickness="1" BorderBrush="Black">
<Grid x:Name ="GeneralGrid" Margin="426,362,10,291" ShowGridLines="True" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="61*" ></ColumnDefinition>
<ColumnDefinition Width="185*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="IP">IP</TextBlock>
<TextBlock Name="ISP" Grid.Row="1">ISP</TextBlock>
<TextBlock Name="Location" Grid.Row="2">Location</TextBlock>
<TextBlock Name="Longitude" Grid.Row="3">Longitude</TextBlock>
<TextBlock Name="Latitude" Grid.Row="4">Latitude</TextBlock>
</Grid>
</Border>
</Grid>
</Window>
I would recommend that you do NOT continue to use the Visual Studio Designer as you have been. It does a very poor job of creating the XAML that we actually want. For example, your UI elements have all got an exact Margin set on them (thanks to the VS Designer I imagine) and this can make things awkward for you later on.
WPF was really designed to enable developer to use resizable controls so that the UI can resize itself when the user resizes the application. Different Panels provide different sizing abilities to their child controls and you can find out more about that from the Panels Overview page on MSDN. However, back to your question regarding the Grid class.
Because you have used the Visual Studio Designer, your controls have not ended up in the Grid cells that you wanted, instead just being placed 'on top of', or 'in front of' them. In order to place a control into a particular Grid cell, you need to set the Grid.Row and/or Grid.Column Attached Properties. See this example taken from the last linked page from MSDN:
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
<TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>
</Grid>
You appear to have placed all your BigGrid elements into a single cell of that layout grid, and the only thing stopping them from appearing on top of each other is the fact you've defined margins. You have not defined a margin for your border, but then defined margins for its children, which means they'll be offset.
Really, for best layout, you want to avoid margins as much as possible and divide your BigGrid into rows and columns. Then place your UI into those cells. If your border is within its own cell you will not have it appear to wrap everything.
I'm creating a simple file browser where it's display will mimic that of the Windows (7) Explorer "Content" display mode. I envision a ListView control whose ItemsSource will be bound to a collection of FileSystemInfo objects. Each of the ListViewItems will show filename, last modified date/time, etc. However, I also want them to have an Expander which, when a user clicks it, will expand vertically to show the file's contents.
Below is my XAML code that I created with Expression Blend. This is the general template of what I want the ListViewItem to be. However, the Expander won't cause the Border's vertical height to expand out to match the additional space required by the Expander's Grid content (in this example a ScrollViewer that has a height of 500 -- obviously each file may have different dimensions depending on content -- image, plain text, etc).
So, what am I doing wrong here? Furthermore, I'm wondering if the ListView control will even behave properly by having its Item elements vertically expand/contract.
This is the ControlTemplate I wish to use for the ListItemView:
<Border BorderBrush="Black" BorderThickness="1" Background="Beige">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.50*"/>
<ColumnDefinition Width="0.25*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="FileName" d:LayoutOverrides="Height" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="FileType" d:LayoutOverrides="Width, Height" VerticalAlignment="Center"/>
<TextBlock Grid.Column="2" TextWrapping="Wrap" Text="DateTime Last Modified" VerticalAlignment="Center" d:LayoutOverrides="Width" Grid.RowSpan="2" HorizontalAlignment="Center"/>
<Expander Header="Expander" d:LayoutOverrides="Width" Grid.ColumnSpan="3" Grid.Row="2">
<Grid>
<ScrollViewer Content="File Contents" Height="500"/>
</Grid>
</Expander>
</Grid>
</Border>
in my Silverlight 4 application I have a listbox for which I created an itemtemplate:
<DataTemplate x:Key="ItemTemplate">
<Grid Background="{StaticResource BrushCharacteristicListBoxItemBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="TextBlockCharacteristicName" Text="{Binding Name}" TextTrimming="WordEllipsis" ToolTipService.ToolTip="{Binding Name}" Margin="6,0,2,0" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBlock x:Name="TextBlockSeperator" Text="=" Grid.Column="1" VerticalAlignment="Center" />
<Border Grid.Column="2" HorizontalAlignment="Right" Margin="2,2,6,2" Background="{Binding FunctionState, Converter={StaticResource ConvertCharacteristicFunctionState2Color}}">
<TextBlock x:Name="TextBlockCharacteristicValue" Text="{Binding CalculatedValue, Converter={StaticResource ConvertDouble2Display}}" Padding="2,0" Foreground="{StaticResource BrushCharacteristicListBoxItemBackground}" ToolTipService.ToolTip="{Binding ValueOrFunc}" MaxWidth="72"/>
</Border>
</Grid>
</DataTemplate>
Now I want to access the Controls defined in the template (i.e. TextBlockCharacteristicName) from the code behind. I need this to manually adapt the size of the Controls, which can't be done in an other way.
I hooked into the LayoutUpdated event, but did not found a way to access the controls.
I have tried it with
((StackPanel)ListBoxCharacteristics.GetItemsHost()).Children
which gives me a the list of the ListBoxItems, but there seems to be no way to get the controls from there. Can anyway help me out with this problem?
Thanks in advance,
Frank
Get the small VisualTreeEnumeration chunk of code from this blog: Visual Tree Enumeration.
Now you can find your "TextBlockCharacteristicName" elements with this code:-
foreach (var textBlock in ListBoxCharacteristics.Descendents()
.OfType<TextBlock>()
.Where(t => t.Name == "TextBlockCharacteristicName") )
{
// Do stuff with each Text block.
}
I am new to the MVVM design pattern, and I am working on a project to automate shipping processes.
The particular problem that I am having is I have a UserControl (my EditShipmentView) which when it loads, assigns it's ViewModel to its DataContext. The ViewModel is passed a recordID which it uses to pull the entity that represents a shipment. It does this successfully, as I can see it in Mole (visualizer).
Below is a XAML fragment showing the first couple of TextBoxes, and what I thought the bindings should look like.
<local:SnazzyForm Background="#FF318AE1">
<Grid Margin="6,0,0,0">
<TabControl Style="{DynamicResource SnazzyTabControl}" TabStripPlacement="Left" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0,50">
<TabItem Header="Overview" Style="{DynamicResource TransparentTabItems}">
<Grid Margin="6,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel DataContext="{Binding Path=ShipmentRecord}">
<TextBlock HorizontalAlignment="Left" Text="Contact Info" TextWrapping="Wrap" Style="{DynamicResource TitleText}"/>
<Path Fill="#FFFFB900" Stretch="Fill" HorizontalAlignment="Left" Width="200" Height="2" Data="M0,16.5 L278.5,16.5" Stroke="#FFFFB900"/>
<StackPanel Margin="0,10,0,0">
<Grid Margin="0,16,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".40*"/>
<ColumnDefinition Width=".60*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Right" Text="Company" TextWrapping="Wrap" VerticalAlignment="Top" Style="{DynamicResource FieldLabel}" TextAlignment="Right" Margin="0,2,9,0"/>
<TextBox Text="{Binding Path=CompanyName, Mode=TwoWay, UpdateSourceTrigger=LostFocus, NotifyOnValidationError=True, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" TextWrapping="Wrap" d:LayoutOverrides="Height" Grid.Column="1"/>
</Grid>
<Grid Margin="0,16,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".40*"/>
<ColumnDefinition Width=".60*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Right" Text="Contact" TextWrapping="Wrap" VerticalAlignment="Top" Style="{DynamicResource FieldLabel}" TextAlignment="Right" Margin="0,2,9,0"/>
<TextBox Grid.Column="1" Text="{Binding Path=ContactName}" TextWrapping="Wrap" d:LayoutOverrides="Height"/>
</Grid>
So, to recap...
EditShipmentView (Inherits from SnazzyForm)
DataContext is EditShipmentViewModel
EditShipmentViewModel.ShipmentRecord is populated (successfully) with a shipment object
ShipmentRecord.CompanyName is a string which obviously should return the name of a company.
Keep in mind this is only my most recent attempt. Previously I have not bound the Stackpanels DataContext and had the Textboxes bound as such "{Binding Path=ShipmentRecord.CompanyName}", and what seems like a hundred different variations. What hair I have left is rapidly receding. Please, think of my hair, send help.
Cory
Show us your code? Chances are your view model is just not notifying the view when it changes. If your bindings are incorrect (not resolved) you will see output to that effect in Visual Studio's debug output window. Check that as well.
Make sure that EditShipmentViewModel (likely culprit) and ShipmentRecord implement INotifyPropertyChanged.
If the data is loaded after the initial view is setup, and the EditShipmentViewModel class doesn't raise a PropertyChanged event for ShipmentRecord, then the View (xaml) will never know to update the binding, and you'll see an empty string.
I am using a grid by the definition of appropriateness defined in this question Grid vs Stackpanel. However when working with grids you have to define the controls position inside them explicitly in the grid. This becomes a pain when having to reorder controls or when adding a new control to the grid. With the code provided as an example, is there a way to get the rows and columns for the text and text boxes to line up while being easy to modify or expand later?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Value One:" Grid.Row="0" Grid.Column="0"/>
<TextBox x:Name="TextBoxOne" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="Value Two:" Grid.Row="1" Grid.Column="0"/>
<TextBox x:Name="TextBoxTwo" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="Value Three:" Grid.Row="2" Grid.Column="0"/>
<TextBox x:Name="TextBoxThree" Grid.Row="2" Grid.Column="1"/>
</Grid>
I wrote a custom control I use that makes it extremely easy to do this, but before I created it I generally used this sort of thing:
<ControlTemplate x:Key="ColumnsTemplate" TargetType="HeaderedContentControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" ContentSource="Header" />
<ContentPresenter Grid.Column="1" />
</Grid>
</ControlTemplate>
<ItemsControl ... ItemTemplate="{StaticResource ColumnsTemplate}">
<HeaderedContentControl Header="Value One:">
<TextBox x:Name="TextBoxOne" />
</HeaderedContentControl>
<HeaderedContentControl Header="Value Two:">
<TextBox x:Name="TextBoxTwo" />
</HeaderedContentControl>
...
</ItemsControl>
This allows easy add/remove of items from the ItemsControl, or better yet, data binding.
If you prefer auto-sizing on the grid rather than star sizing (3* and 7*) you can use a shared sizing scope by setting IsSharedSizeScope on the ItemsControl and SharedSizeGroup on the first ColumnDefinition.
Another option is GridView, but I find it more difficult to use for this purpose.