I have this xaml:
<Rectangle x:Name="MyRectangle" Height="{Binding MyCount}" />
I would like to bind using my C++/CX code behind instead. In WinJS I could do this:
datacontext.bind("MyCount", function () { MyRectangle.Height = MyCount; });
Is there an equivalent in C++/CX?
You can create a Windows.UI.Xaml.Data.Binding object and wire it up in code-behind.
Binding^ b = ref new Binding();
b->Mode = BindingMode::OneTime;
b->Source = MyCount;
MyRectangle->SetBinding(FrameworkElement::HeightProperty, b);
Related
I try to test a very basic custom plugin action, but I seem to have made a mistake.
This is my plugin:
function krpanoplugin() {
var local = this; // save the 'this' pointer from the current plugin object
var krpano = null; // the krpano and plugin interface objects
var plugin = null;
var xml_value = 100.0; // the value for a custom xml attribute
// registerplugin - startup point for the plugin (required)
// - krpanointerface = krpano interface object
// - pluginpath = the fully qualified plugin name (e.g. "plugin[name]")
// - pluginobject = the xml plugin object itself
local.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
// get the krpano interface and the plugin object
krpano = krpanointerface;
plugin = pluginobject;
// first - say hello
krpano.trace(1, "Bridge Plugin loaded: [" + plugin.name + "]");
// add plugin action (the attribute needs to be lowercase!)
plugin.jsbmodal = action_jsbmodal;
};
function action_jsbmodal() {
console.log(arguments);
krpano.trace(arguments);
}
}
But if I try to execute the action onClick at a hotspot like this:
<hotspot name="hotspot_171" style="link_hs_sm" url="%CURRENTXML%/add_hotspot/picture/icon-text.png" distorted="true" alpha="1" capture="true" depth="1000" flying="0" handcursor="true" zorder="5" zoom="false"
ath="160.8416" atv="-37.4461" width="50" height="prop" rx="0" ry="0" rz="0" ox="0" oy="0" rotate="0" scale="1" edge="center"
install_onclick="3" name_hs="hotspot_171" scene_EL="scene_8" info_Ah="add_hotspot/text/leipzig-test.html" fov_EL="140" enabled2="true" visible2="true" drag_hs="true"
onclick="jsbmodal('om')"
/>
I only get the following message:
WARNING: Unknown action: jsbmodal
I have registered the plugin like this:
<plugin name="jsbModal" url="../jsbModalPlugin.js" keep="true" preload="true" />
Can you see where I made the mistake?
According to https://krpano.com/forum/wbb/index.php?page=Thread&postID=78841 the probably cleanest solution is to use the plugin action syntax in the xml:
plugin[YOUR_PLUGIN_NAME].yourAction()
Which is in my case:
<hotspot name="hotspot_171" [...]
onclick="plugin[jsbmodal].jsbmodal('om')"
/>
I want to get Image element with id='item' on created.
I can't seem to find anything on google. Most of the tutorial on the internet is using Typescript and always start with page=args.object
export function pageLoaded(args) {
page = args.object;
item = page.getViewById("item");
}
You can use refrences for this.
Sample xml:
<StackLayout ~body class="body" row="1">
or:
<StackLayout ref="body" class="body" row="1">
Sample code:
mounted() {
let body = this.$refs.body;
}
As mentioned in the comments of the other answers:
<StackLayout ref="body" class="body" row="1">
mounted() {
let body = this.$refs.body;
}
Also you can access the nativeView by accessing it's property: let
nativeLayout = this.$refs.body.nativeView;
In NativeScript-Vue the nativeView of a ViewComponent is the wrapper element of the actual native platform (iOS/Android) element/view.
For example the nativeView of the ref="body" is the StackLayout of the tns-core-modules and it has a nativeViewProtected property which is the actual native framework element (on iOS UIView and android.view.View on Android)
On my UWP app, I have added a CalendarView and programmatically selected several dates. Now I want to make it read only to the end user. But the control does not provide such functionality and making IsEnabled = False is not an option.
Please let me know a way of making the control read only.
Thanks.
NOTE: I get this problem with the keyboard. When a user hits enter key or space bar key, Calender changes its view. I want to make it static.
Setting IsEnabled to False is the right way to go. I guess the reason that you don't want to use it is because doing so would dim the whole control. So the real question comes down to - how to disable the control while making its appearance unchanged?
Generally, the appearance of a disabled (i.e. IsEnabled="False") control is defined in the Disabled state inside its style. In your case though things will get a little bit more complicated because you need to update more than one styles as the CalendarView is a complex control.
Here is how it can be done.
First, you need to find the default style of the CalendarView control and put it inside your App.xaml. Then, search for <VisualState x:Name="Disabled"> and comment out everything within this visual state. There should be two of them 'cause the first one is for the up/down button and second one is for all the day of week text.
Apart from this, you also need to manually update the color of each CalendarViewDayItem simply because the TextBlock which is used to display the day number doesn't live inside its style.
To do this in code, go to my answer here and copy overChildren extension method, then you just need to run the following code in your Loaded event. Note you might want to give it a little bit delay so the Disabled state is applied properly.
Loaded += async (s, e) =>
{
await Task.Delay(100);
var dayItems = MyCalendarView.Children().OfType<CalendarViewDayItem>();
foreach (var dayItem in dayItems)
{
var textBlock = dayItem.Children().OfType<TextBlock>().Single();
textBlock.Foreground = new SolidColorBrush(Colors.Black);
}
};
After doing all this, your CalendarView control will now appear just as normal when it's actually disabled.
Hope this helps!
You could also try
YourCalendarView.IsHitTestVisible = false;
or
<CalendarView IsHitTestVisible="False" />
For anyone who's looking for a complete code here it is. All this is thanks to Justin XL.
static int minOne = -1;
static int plsOne = 1;
public static async Task ManipCalenderUserInterface(List<CalendarView> calenders, List<List<DateTime>> datesListByMonth)
{
try
{
CoreDispatcher coreDispatcher = Window.Current.Dispatcher;
await Task.Run(async () =>
{
await Task.Delay(1000);
//coreDispatcher is required since you're not on the main thread and you can't manip UI from worker threads
await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
int cnt = 0;
bool cont = false;
bool stop = false;
//Highlight color. I get it from my resource file
SolidColorBrush colorBrush = (SolidColorBrush)Application.Current.Resources["FgBlue1"];
//This code wrote to manipulate multiple calenders
foreach (var item in calenders)
{
var dayItems = item.Children().OfType<CalendarViewDayItem>();
var firstDayOfMonth = new DateTime(dayItems.Skip(15).First().Date.Year, dayItems.Skip(15).First().Date.Month, plsOne);
var lastDayOfMonth = firstDayOfMonth.AddMonths(plsOne).AddDays(minOne);
foreach (var dayItem in dayItems)
{
var textBlock = dayItem.Children().OfType<TextBlock>().Single();
int dayNum = System.Convert.ToInt32(textBlock.Text);
if (dayNum == 1 && !stop) cont = true;
if (cont && dayNum >= 1 && dayNum <= lastDayOfMonth.Day)
{
textBlock.Foreground = new SolidColorBrush(Colors.Black);
//Bold the today date on this month's calender
if (dayItem.Date == DateTime.Now.Date)
{
textBlock.FontWeight = FontWeights.Bold;
}
//datesListByMonth: contains all the dates need to be highlighted on th calender
if (datesListByMonth[cnt] != null && datesListByMonth[cnt].Contains(dayItem.Date.Date))
dayItem.Background = colorBrush;
}
if (cont && dayNum == lastDayOfMonth.Day)
{
cont = false;
stop = true;
}
}
cnt++;
cont = false;
stop = false;
}
});
});
}
catch (Exception ex)
{
}
}
I know this is late, but assuming that you want the user to still be able to select and scroll through months, etc. this is all you should need to do:
<CalendarView SelectionMode="Multiple">
<CalendarView.Resources>
<Style TargetType="CalendarViewDayItem">
<Setter Property="IsHitTestVisible"
Value="False" />
<Setter Property="IsTabStop"
Value="False" />
</Style>
</CalendarView.Resources>
</CalendarView>
The IsHitTestVisible setter will ensure that the DayViewItem cannot be clicked or tapped, and the IsTabStop setter prevents keyboard focus on it.
This allows you to keep the full CalendarView functionality while simply disabling user date-selection.
I need to add one char the the TextField while also typing in. I get typed chars from View Model Object.defineProperty getter/setter. What do I should do?
I would recommend going through this article in order to receive better answers. One important thing is to show us a code you are working with and what you have tried so far.
As for the question - are you trying to create two-way binding?
if so this is the basic scenario to do it with a text-field:
page.ts
import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";
var vm = new Observable();
vm.set("msg", "default message");
export function navigatingTo(args: EventData) {
var page = <Page>args.object;
page.bindingContext = vm;
}
page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<StackLayout>
<TextView hint="" text="{{ msg }}" editable="true" />
<TextField hint="" text="{{ msg }}" />
</StackLayout>
</Page>
how can I get the slide event for slider ? I tried
slider.on('slide', function(){
console.log('slide!');
});
and
slider.on('change', function(){
console.log('slide!');
});
but it doesnt work :(( Thanks in advance.
Bind the slide value to an observable object and then listen to the propertyChangeEvent of that object.
Example
Given you have an XML looking like this:
<Page loaded="pageLoaded">
<StackLayout>
<Slider value="{{ sliderValue }}" />
</StackLayout>
</Page>
Then you can write your binding and event like this:
var observable = require("data/observable");
function pageLoaded(args) {
var page = args.object;
var viewModel = new observable.Observable();
viewModel.set('sliderValue', 42);
page.bindingContext = viewModel;
viewModel.on(observable.Observable.propertyChangeEvent, function(propertyChangeData){
//Do your magic here
});
}
exports.pageLoaded = pageLoaded;
Data bindings and Observable Objects are key parts of NativeScript. I highly recommend reading the documentation and get yourself familiar with them:
https://docs.nativescript.org/bindings.html
https://docs.nativescript.org/ApiReference/data/observable/HOW-TO.html