I was assigned a very obscure project where basically every control, every design element is an image. I was provided with design files for every element of the app.
I even informed the people who gave the assignment that it's probably a very bad idea due to many different reasons, and it would be better to do everything manually but I still have to do it with images. Every time I add something - I see that everything is fine in the designer , but when I run it on my Lumia 925 everything shifts a little bit in different directions, even the buttons.
Any suggestions on the proper way to do this? To have custom templates for buttons which are basically images in a way it will not shift and I would see the same thing in the designer and on the device.
You have a great solution for controls called Behaviors, just add the extension in the project and add the following everywhere you need a Tap like the following, (that's an example just for tap you could use the event tap):
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
<Image>
<Interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction .../>
</core:EventTriggerBehavior>
...
</Interactivity:Interaction.Behaviors>
You have all the behaviors and actions here:
https://msdn.microsoft.com/en-us/library/microsoft.xaml.interactions.core.aspx
and how to add them in the project here:
http://blogs.windows.com/buildingapps/2014/07/22/tips-and-tricks-for-using-xaml-controls-in-your-universal-windows-apps/
Then add the logic in the methods you call from the images. There are plenty of behaviors done, to begin storyboards, to change properties...
Apart you can use a ViewBox control that it scales everything in the screen to not be scaling every image. Try that.
Related
My app has a bunch of paragraphs which are compared together. This is implemented using a generic ItemsRepeater that creates as many Grid elements as there are paragraphs. Inside each grid is a TextBlock with the paragraph number, and a RichTextBlock that contains the paragraph. The hierarchy is therefore like this:
<ItemsRepeater>
<Grid>
<TextBlock />
<RichTextBlock></RichTextBlock/>
</Grid>
<Grid>
...
</Grid>
<Grid>
...
</Grid>
</ItemsRepeater>
This results in a text selection as follows:
Only one RichTextBlock can be selected at a time. However, I would like to allow text selection of all paragraphs of the ItemsRepeater. How is that possible?
Edit
I'm open to other approaches. I've tried manually filling in a StackPanel or RichTextBlock with items. That's not a problem. However, because the numbered paragraphs need to align, I need to be able to set their height to match each other. From what I can find, only elements that derive from FrameworkElement have the ActualHeight and Height properties I need for that. However, FrameworkElements like TextBlock and RichTextBlock also do not allow multiple selection, which is the problem I'm trying to solve in the first place. Someone posted a response to a similar question about WPF, but it uses a strange solution I don't think applies.
So the question could also be framed as: how is it possible to find and set the height of a Run within a TextBlock or RichTextBlock? Using that idea, it was impossible to get/set the run height inside a paragraph. I'm not bound to using ItemsRepeater, but that has also not yielded a useful result. I'm seeking to avoid resorting to HTML/Javascript for this.
UWP does not expose enough APIs for you to do that. I have worked on a similar issue with RichEditBox on UWP and there is no good solution that I have found. But if you really want to, there are two main approaches to achieve that:
Implementing the selection yourself by sniffing the mouse events and render the selection on top of the controls. There are so many corner cases, specially if you want to have a proper accessibility tree for the control that you are building.
Alternatively, you can create a WinRT C++ project where you would have access to more APIs, build a control and render it onto a canvas that is created with your C#/Xaml app.
The good news is that you are not permitting people to edit (RichTextEdit) and it is just view (RichTextBlock) so you do not have to worry about the automatic corrections, IME, Url detection, etc.
Edit: Originally I mentioned WinRT C++, but I meant C++/CX. It might work with WinRT too, but I have not tried.
I am developing a C# WPF application utilizing MVVM pattern
In my app user via mouse (or touchscreen) sets offset values for the Pan-Tilt Motor. Since movement should be somwhat percise, I decided to create a UI helper element, which currently looks like this:
I want it to look nice and dandy, so that values wont be obscured or intersected with other lines:
But at the same time I want to stick to MVVM pattern, and such behaviour, although not hard to implement per se, requires a lot of bindings, logic and triggers. That clutters my XAML and View Model a lot, so here comes my question:
What is the common way/best practice of encapsulating such element (which is basically a complex dynamic figure) into some abstract form, hiding all irrelevant to the main app logic within it?
The desired solution wold look something like this:
<canvas>
<i:Interaction.Triggers>
<!--MouseUp, MouseDown, MouseMove Commands...-->
</i:Interaction.Triggers>
<i:Interaction.Behaviors>
<!--Getting Mouse X and Y values...-->
</i:Interaction.Behaviors>
<MouseUI MouseUiClass="{Binding MouseUiClass}"/>
or
<MouseUI Start="{Binding MouseUiClass.Start}"
End="{Binding MouseUiClass.End}"
IsFinished="{Binding MouseUiClass.IsFinished}"/>
</canvas>
I did consider to use UserControl but I struggle to understand how to properly display it because dynamically resizes, and start and end point can be placed in any part of canvas.
So, I have an UserControl which is basically a Grid with 3 different DataGrids and some Labels. Seeing how I need to use this 3 times, instead of copying and pasting the code, I thought I'd just generate it once and use it in my main window.
I have defined the UserControl as:
<UserControl x:Class="Propuestas.UI.Andrei.DGMTX"
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:Propuestas.UI.Andrei"
mc:Ignorable="d"
Height="300"
Width="791.496">
And I am using it in my window as such:
<StackPanel Grid.Row="2">
<local:DGMTX/>
<local:DGMTX/>
<local:DGMTX/>
</StackPanel>
For some reason, it doesn't show up in the designer panel on my main window. Is there something I'm doing wrong?
Also, I would like to be able to bind based on a bound element. For example, let's say I have a class Model which has all the data that I need to represent in my UserControl.
I would like to do something like
<local:DGMTX Binding = {Binding Model}/>
and then be able to bind all of the other elements in my UserControl in its code. Is there a way I could do this in XAML? Or do I have to do it programmatically?
There are two ways to communicate your view model to controls:
As one commenter suggested, bind your view model to the data context of the user control. This enables binding everything in your view model to the inner workings of the control. Problem is the inner workings now depend on the data the object is associated with.
Create dependency properties for only the ones in your view model that the user control actually needs. I personally prefer this over the first in almost 99% of all cases because you know exactly what data the control expects and you can manipulate bound data in ways unique to the control that maybe the view model isn't responsible for.
Couple things to note about designer support when creating your own controls:
Visual Studio's designer still has a lot of issues when it comes to WPF. Don't believe me? Try referencing a dynamic resource defined in your main assembly in another. The designer will crash and tell you it can't be found. This isn't the actual case, however. As soon as you run the app, you will never see this exception.
In order to see changes made to source reflect in designer, you have to build the project first (the project in which the control resides, not necessarily the one it's referenced in). Sometimes, "cleaning" or (with better luck in some cases) "rebuilding" the project is the only thing that updates the designer in the main project when "building" doesn't work.
If after considering the latter and you still can't see anything, consider the implementation of the control. Is anything out of place? Did something accidentally get hidden? You may not think so at first and maybe it takes ten hours of frustration to succumb and check, but the little things can make all the difference.
Following is one screen of my app that loads around 100 items on each search call to server (WCF).
I have two following questions.
One: currently i am assigning all the resultant items to itemssource of longlist selector but i want to load initially 10 items and when user swipes down to almost end it load 10 more. have seen this behavior in many applications (foursquare) but couldn't figure out because i am new for silverlight.
Two: If the item has image then PicturePath is set to the server image path otherwise local no-image path is set. Problem is when image is being downloaded the image area is shown blank until it fully downloads and then starts showing images, i need it be be something like foursquare shows until image is completely loaded. My binding code is given below along with my requirement.
Thanks.
Makes no sense to answer both questions with a bunch of code.
Regarding the first question, you need a way to detect when the user has scrolled to the bottom of the ListBox / LongListSelector. You need to use ObservableCollection instead of a simple List, because ObservableCollection notifies the UI when the new items are added to it.
This question has been asked dozens of times before, for example see here.
Regarding the second question, the simplest solution would be to use two images, one on top of the other inside the ItemTemplate. That way the static, local image will be shown while the dynamic is empty, and when the dynamic one is downloaded it will cover the static one. It's rendered on top of the static image so it's as if the static image was not there.
<Grid>
<Image Source="Assets/StaticImageFromLocalCache.jpg" Width="400" Height="400" />
<Image Source="Assets/DynamicImageFetchedFromInternet.jpg" Width="400" Height="400" />
</Grid>
Im just starting out with wpf (in blend 4) and i would like to create an application that has a side menu for changing the content. What i am looking for is something like in word 2010 under the file menu. if you click the menu on the left side the content on the right side changes accordingly. i have read articles about nesting a page.xaml into a frame and change the frames navigation source to each page. Is this right? When i do that a navigation bar appears at the top. I can get rid of that easy but it seems like i am taking the wrong path at what i want to achieve.
Thanks in advance.
Just to chime in on this, both the TabControl and the Frame-based solutions are somewhat like the extremes of a spectrum. The tab control effects a very close coupling between the tab state and the displayed UI (e.g., you might find it difficult to change to a dialog for which there is no explicit tab item), whereas the frame enables relatively loose coupling, but might be overkill for this scenario, as it aims to support full-blown linear navigation with a history/page stack. (Prism, for example, offers a similar mechanism through its "regions" concept.)
A middle ground could be to have a main "window frame" UI with a placeholder element, and have your individual "pages" derive from UserControl, making them regular UI elements. To switch to a specific page in your UI, you would instantiate (through code or XAML resources) the corresponding user control, and set it as the Content property of the aforementioned placeholder element. (This is basically the same mechanism you mentioned for VB, where you hide/show subforms.)
So there's a range of options to choose from, depending on the actual constraints of your scenario.
The simplest code to do that is creating a TabControl with TabStripPlacement="Left". For example :
<TabControl TabStripPlacement="Left">
<TabItem Header="Tab1" />
<TabItem Header="Tab2" />
<TabItem Header="Tab3" />
</TabControl>
You can apply Styles to further change UI, colors and look & feel.