How can I access page resource element in C# coding? I have the following piece of code in my XAML. I want to access the image element in my C# Code, but it is not accessible.
<Page.Resources>
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="150" Height="150">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image x:Name="image" Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" />
</Border>
</Grid>
</DataTemplate>
It is not accessible because a DataTemplate resource does not get instantiated until it is loaded. You would need to do something like this to load it first:
var dataTemplate = (DataTemplate)this.Resources["Standard250x250ItemTemplate"];
var grid = dataTemplate.LoadContent();
and then traverse the element tree to get to the Image.
A better approach in many scenarios is to define an attached dependency property or attached behavior that you can attach to your Image in XAML and write code related to the associated Image.
It depends on when you are trying to access it. If trying to access the image control of elements that have already been rendered then you can use ItemContainerGenerator like such:
//assumes using a ListView
var item = (ListViewItem)listView.ItemContainerGenerator.ContainerFromItem(myModel);
// traverse children
var image = GetChildOfType<Image>(item);
// use the image!
private T GetChildOfType<T>(DependencyObject obj)
{
for(int i = 0; i< VisualTreeHelper.GetChildrenCount(obj); i++)
{
var child = VisualTreeHelper.GetChild(obj, i);
if(child is T) return child as T;
T item = GetChildOfType<T>(child);
if(item != null) return item;
}
return null;
}
If you need to change properties of the image, then that can be accomplished through binding as well.
Related
I created a textblock on a XAML form within a ContentControl. When I try to program it, C# doesn't recognize the name and I can't do anything with it.
I tried adding a textblock to the form outside of the Content Control, but that still didn't fix the problem.
Here is the XAML code:
<ContentControl>
<ContentControl.Template>
<ControlTemplate>
<Grid VerticalAlignment="Bottom" Height="250" Margin="0,450,0,0">
<Rectangle Fill="Beige" Stroke="Black" StrokeThickness="3"
Width="639" Height="250" Margin="0,0,0,0"/>
<TextBlock Text="Goal:" FontSize="18" Margin="7,50,0,0"/>
<TextBlock Text="Eaten:" FontSize="18" Margin="7,120,0,0"/>
<TextBlock Text="Remaining:" FontSize="18" Margin="7,190,0,0"/>
<TextBlock Text="Calories:" FontSize="18" Margin="140,10,0,0"/>
<TextBlock Text="Fat(g):" FontSize="18" Margin="270,10,0,0"/>
<TextBlock Text="Carbs(g):" FontSize="18" Margin="380,10,0,0"/>
<TextBlock Text="Protein(g):" FontSize="18" Margin="520,10,0,0"/>
<TextBlock x:Name="lblCalorieGoal" Text="Peb"
TextAlignment="Center" FontSize="18" Margin="-290,50,0,0"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
<TextBlock Text="TextBlock" TextWrapping="Wrap"/>
</ContentControl>
And then here is the corresponding working C# code:
public LogFood()
{
this.InitializeComponent();
Windows.Storage.ApplicationDataContainer localSettings =
Windows.Storage.ApplicationData.Current.LocalSettings;
Windows.Storage.StorageFolder localFolder =
Windows.Storage.ApplicationData.Current.LocalFolder;
Windows.Storage.ApplicationDataCompositeValue composite =
(Windows.Storage.ApplicationDataCompositeValue)localSettings
.Values["nutritionSettings"];
int calorieMin = Convert.ToInt32(composite["calorieMin"]);
int calorieMax = Convert.ToInt32(composite["calorieMax"]);
int gramsFatMin = Convert.ToInt32(composite["gramsFatMin"]);
int gramsFatMax = Convert.ToInt32(composite["gramsFatMax"]);
int gramsCarbsMin = Convert.ToInt32(composite["gramsCarbsMin"]);
int gramsCarbsMax = Convert.ToInt32(composite["gramsCarbsMax"]);
int gramsProteinMin = Convert.ToInt32(composite["gramsProteinMin"]);
int gramsProteinMax = Convert.ToInt32(composite["gramsProteinMax"]);
lblCalorieGoal.Text = calorieMin;
}
I expect to be able to change the text of the textblock. Instead, I get the error, "The name lblCalorieGoal.Text does not exist in the current context."
The key realization here is that a template is potentially a reusable part of XAML, so anything inside is in fact embedded in it a not "publicly" accessible, as there could potentially be multiple instances of the same template materialized on the view.
That being said, you can still access the materialized children inside the template indirectly by searching for them within the template using VisualTreeHelper -
internal static FrameworkElement FindChildByName(DependencyObject startNode, string name)
{
int count = VisualTreeHelper.GetChildrenCount(startNode);
for (int i = 0; i < count; i++)
{
DependencyObject current = VisualTreeHelper.GetChild(startNode, i);
if (current is FrameworkElement frameworkElement)
{
if (frameworkElement.Name == name)
return frameworkElement;
}
var result = FindChildByName(current, name);
if ( result != null)
{
return result;
}
}
return null;
}
Note, that this works only after the control has loaded (for example in the Page.Loaded event handler -
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var block = FindChildByName(ContentRoot, "lblCalorieGoal") as TextBlock;
}
However, this all is not an ideal solution to your problem. Instead, you should either ditch the use of ContentControl altogether and have the controls in the template directly on the page (which would make them directly accessible from the code-behind), or/and use data-binding to bind data directly to appropriate controls. In this case, I would create a class to hold the data, for example:
public class NutritionInfo
{
public string CalorieGoal { get; set; }
}
Now instead of ContentControl.ControlTemplate (which replaces the template of the whole control), you will replace the ContentTemplate instead (which is just the thing which `ControlTemplate in fact displays):
<ContentControl x:Name="ContentRoot">
<ContentControl.ContentTemplate>
<DataTemplate x:DataType="local:NutritionInfo">
... your template
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
Note we use x:DataType to specify the type we bind to so that we can use x:Bind syntax. Finally, we update the template itself:
<TextBlock x:Name="lblCalorieGoal" Text="{x:Bind CalorieGoal}" ... />
We use x:Bind to bind the text of the TextBlock to the CalorieGoal property. We are almost done, now just set the Content property of the ContentControl to an instance of NutritionInfo (for example via data binding or directly):
ContentRoot.Content = new NutritionInfo()
{
CalorieGoal = "1243"
};
Overall I recommend to read further about how data-binding works in XAML, as that will help you significantly simplify your code and avoid accessing controls directly via x:Name, and decouple UI from your code. See documentation for more info.
I have a button I declare within a Stack Panel as I've written below. I want to access the button in my class so I can change the visibility such as myButton.Visibility = Visibility.Hidden but it just says myButton does not exist. It seems private to the XAML stack panel and I don't know why.
XAML
<ItemsControl x:Name="ic">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" Foreground="White" TextWrapping="Wrap" FontSize="12" Margin="0, 0, 0, 0" Width="100" VerticalAlignment="Center" Padding="0"/>
<Button x:Name="myButton" Content="X" Foreground="Red" Width="15" Height="15" Background="Transparent" VerticalAlignment="Top" BorderThickness="0" Padding="0" Click="Remove_Click"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Class
myButton.Visibility = Visibility.Hidden; //myButton doesn't exist in current context
Due to your button being declared within a DataTemplate, you cannot access it directly as with objects declared outside of it. (The DataTemplate provides the information to template your objects when added to the ItemsControl)
If you expect to only have a single , you can remove the whole object around it and gain access to your Button that way.
If you're planning on having an array of s in your , then you'll have to look into making a search logic like the one from this website:
https://dzone.com/articles/how-access-named-control
This generic extension method will search recursively for child elements of the desired type:
public static T GetChildOfType<T>(this DependencyObject depObj)
where T : DependencyObject
{
if (depObj == null)
return null;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
var result = (child as T) ?? GetChildOfType<T>(child);
if (result != null) return result;
}
return null;
}
So using that you can use like this ic.GetChildOfType<Button>();
I'm having problems finding a control (ToggleSwitch) inside my ListView. I have tried several approaches found here on SO or on other places around the web but none seems to be working.
Here is a the listView markup
<ListView Name="LampsListView" ItemsSource="{x:Bind Lamps}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Lamp">
<StackPanel Name="StackPanel">
<TextBlock Margin="10,0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left" />
<ToggleSwitch Margin="10,0" HorizontalAlignment="Right" Name="LampToggleSwitch" IsOn="{x:Bind State, Converter={ StaticResource IntToIsOn}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have tried the ContainerFromItem but x will always be null.
foreach (var item in this.LampsListView.Items)
{
var x = this.LampsListView.ContainerFromItem(item);
}
And also the GetChildren approach but even thought GetChildren returns items it wont give me anything I can work with.
private void FindMyStuff()
{
var ch = this.GetChildren(this.LampsListView);
}
private List<FrameworkElement> GetChildren(DependencyObject parent)
{
List<FrameworkElement> controls = new List<FrameworkElement>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); ++i)
{
var child = VisualTreeHelper.GetChild(parent, i);
if (child is FrameworkElement)
{
controls.Add(child as FrameworkElement);
}
controls.AddRange(this.GetChildren(child));
}
return controls;
}
And I've tried booth finding the StackPanel and go straight for the LampToggleSwitch.
The FindMyStuff() is called right after i've updated the ObservableCollection that is bound to the ListView and the update is done from a this.Dispatcher.RunAsync(). I don't know if this has anything to do with it thought.
Could someone please tell me what I'm doing wrong?
Generally traversing visual tree or getting items by names/types is in most cases a wrong way of doing thigs, much better would be to implement apropriate binding.
Nevertheless if you want to do this, you are almost there. As I've tried it should work like this:
var listViewItem = this.mylist.ContainerFromItem(mylist.Items.First()) as ListViewItem;
var itemsStackPanel = listViewItem.ContentTemplateRoot as StackPanel;
var myToggleSwitch = itemsStackPanel.Children.FirstOrDefault(x => x is ToggleSwitch);
// other way with your helper
var childByHelper = GetChildren(listViewItem).FirstOrDefault(x => x is ToggleSwitch);
Just watch out when you run this, if it's done before list is populated, listVieItems will be null.
I have two different DataTemplates in an UserControl Resource. One DataTemplate contains a image control and the other DataTemplate a media element control. The DataType of each DataTemplate represents a ImageViewModel respectively a VideoViewModel. In my user control a have a grid which contains a ContentControl. The content property of the content control is bound to a property which represents the current view model that should be used.
The idea is to change the content of the grid depending on the current view model
<UserControl.Resources>
<DataTemplate DataType="{x:Type vm:ImageScreensaverViewModel}">
<Image Source="{Binding Image}" Stretch="Uniform"/>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:VideoScreensaverViewModel}">
<MediaElement x:Name="Player" Source="{Binding Video}" LoadedBehavior="Play" />
</DataTemplate>
</UserControl.Resources>
<UserControl.CommandBindings>
<CommandBinding Command="MediaCommands.Pause" Executed="PausePlayer" CanExecute="CanExecute"/>
<CommandBinding Command="MediaCommands.Play" Executed="PlayPlayer" CanExecute="CanExecute"/>
</UserControl.CommandBindings>
<Grid>
<ContentControl x:Name="ScreanSaverContent" Content="{Binding CurrentVm}"/>
</Grid>
This works great, but I need to access the MediaElement in code behind so that I can control the media player (Play, Stop, Pause)
I already tried the solution posted on hier without any success. I can access only the selected view model though the content property.
Try this piece of code to reach to a control inside ContentPresenter:
public static FrameworkElement GetControlByName(DependencyObject parent, string name)
{
int count = VisualTreeHelper.GetChildrenCount(parent);
for (var i = 0; i < count; ++i)
{
var child = VisualTreeHelper.GetChild(parent, i) as FrameworkElement;
if (child != null)
{
if (child.Name == name)
{
return child;
}
var descendantFromName = GetControlByName(child, name);
if (descendantFromName != null)
{
return descendantFromName;
}
}
}
return null;
}
I have a FlipView controll which in its data template got a scrollviewer, which then got a canvas with the controls. My problem is that I need to access the canvas inside the eventhandler for the FlipView.SelectionChanged event.
The Xaml for the FlipView looks like this.
<FlipView Grid.Row="1"
d:DataContext="{d:DesignInstance model:PageContent}"
SelectionChanged="FlipView_SelectionChanged"
ItemsSource="{Binding TiffPages}"
x:Name="flBillImage">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="scrollBill"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled"
DataContextChanged="scrollBill_DataContextChanged">
<Canvas x:Name="cvBill"
DataContextChanged="cvBill_DataContextChanged"
Loaded="cvBill_Loaded"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FlowDirection="LeftToRight" >
<Image x:Name="imgBill"
Loaded="imgBill_Loaded"
DataContextChanged="imgBill_DataContextChanged"
Canvas.ZIndex="0"
Source="{Binding BillImage}"
Visibility="{Binding IsFrameExtracted, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Canvas>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
And the C# code for parsing the visual tree looks like this:
public static List<Control> AllChildren(DependencyObject parent)
{
var _List = new List<Control>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var _Child = VisualTreeHelper.GetChild(parent, i);
if (_Child is Control)
{
_List.Add(_Child as Control);
}
_List.AddRange(AllChildren(_Child));
}
return _List;
}
Which is used like:
var ctrls = AllChildren(flBillImage);
Checking the returned list I can find the ScrollViewer but I can't find the Canvas. I have also tried to supply the scrollviewer returned as argument to the AllChildren function but I still can't seem to find the Canvas control.
Am I doing this all wrong?
I faced a similar type of problem quite some time ago. This solution was used to access the child elements of a tree in the code-behind. Much straight-forward.
Hope this helps you.