创建物化视图

1
2
3
4
5
6
7
8
9
10
11

CREATE
MATERIALIZED VIEW mv_test99
REFRESH ASYNC EVERY(INTERVAL 60 MINUTE)
PARTITION BY p_time
PROPERTIES (
"partition_refresh_number" = "1"
)
AS
select date_trunc("day", a.datekey) as p_time, sum(a.v1) as value
from par_tbl1 a
group by p_time, a.item_id

• 分区表达式是否正确
• 基表、数据库这些的格是否正确

1. 检查数据库和物化视图是否存在。
   
2. 初始化物化视图的基本信息：
   
   • 获取物化视图的列定义（schema）
   • 验证列定义的合法性
   • 初始化物化视图的属性（如分区信息）。
3. 处理刷新策略：
   
   • 根据刷新类型（如 ASYNC、SYNC、MANUAL 或 INCREMENTAL）设置刷新方案。
   • 对于异步刷新，设置刷新间隔、开始时间等，并进行参数校验。
4. 创建物化视图对象：
   
   • 根据运行模式（存算分离和存算一体）创建不同类型的物化视图对象
   • 设置物化视图的索引、排序键、注释、基础表信息等。
5. 处理分区逻辑：
   
   • 如果物化视图是非分区的，创建单一分区并设置相关属性。
   • 如果是分区的，解析分区表达式并生成分区映射关系
6. 绑定存储卷：
   
   • 如果物化视图是云原生类型，绑定存储卷。
     

序列化关键数据

这些数据定期保存在 fe/meta 目录中。

1
2

@SerializedName(value = "partitionExprMaps")  
private Map<ExpressionSerializedObject, ExpressionSerializedObject> serializedPartitionExprMaps;

元数据的同步与加载

具体的流程如下：

刷新物化视图

同步分区

刷新 MV 的时候有一个很重要的步骤：同步 MV 和基表的分区。

1. 计算分区差异：根据指定的分区范围，计算物化视图与基础表之间的分区差异。
2. 同步分区：
   1. 删除旧分区：删除物化视图中与基础表不再匹配的分区。
   2. 添加新分区：根据计算出的差异，添加新的分区到物化视图。

分区同步完成之后就可以计算需要刷新的分区了：

• StarRocks 物化视图刷新流程和原理
• 深入理解 StarRocks 的元数据管理

• Both browsers will connect directly without passing video data through the server.
• NestJS (our signaling server) will only help browsers find each other and establish connections.
• No plugins or external APIs will be used.

Why WebRTC?

• Call initiation: The caller first sends a WebRTC offer to the signaling server. The server then alerts potential recipients by broadcasting this offer.
• Call acceptance: When a callee chooses to answer, they send a WebRTC answer back through the server. The server completes the handshake by notifying the original caller (“They answered”).
• Network preparation: Both devices then share their network details with the server, which relays them to the other party.
• Direct connection: Once enough network details are exchanged, WebRTC establishes a peer-to-peer connection, and the signaling server’s job is done.

Why Do We Need a Signaling Server?

Project Setup

Backend Setup

nest new signaling-server
cd signaling-server

npm install @nestjs/websockets @nestjs/platform-socket.io socket.io

WebRTC Requires HTTPS

npm install -g mkcert
mkcert create-ca
mkcert create-cert

import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";
import * as fs from "fs";
import { IoAdapter } from "@nestjs/platform-socket.io";

async function bootstrap() {
  const httpsOptions = {
    key: fs.readFileSync("./cert.key"),
    cert: fs.readFileSync("./cert.crt"),
  };

  const app = await NestFactory.create(AppModule, { httpsOptions });
  app.useWebSocketAdapter(new IoAdapter(app));

  // Replace with your local IP (e.g., 192.168.1.10)
  const localIp = "YOUR-LOCAL-IP-ADDRESS";
  app.enableCors({
    origin: [`https://${localIp}:3000`, "https://localhost:3000"],
    credentials: true,
  });

  await app.listen(8181);
  console.log(`Signaling server running on https://${localIp}:8181`);
}

bootstrap();

Frontend Setup

cd .. && mkdir webrtc-client && cd webrtc-client && touch index.html scripts.js styles.css socketListeners.js package.json

Backend Logic

export interface ConnectedSocket {
  socketId: string;
  userName: string;
}

export interface Offer {
  offererUserName: string;
  offer: any;
  offerIceCandidates: any[];
  answererUserName: string | null;
  answer: any | null;
  answererIceCandidates: any[];
  socketId: string;
  answererSocketId?: string;
}

import {
  WebSocketGateway,
  WebSocketServer,
  OnGatewayConnection,
  OnGatewayDisconnect,
  SubscribeMessage,
} from "@nestjs/websockets";
import { Server, Socket } from "socket.io";
import { Offer, ConnectedSocket } from "./interfaces/offer.interface";

@WebSocketGateway({
  cors: {
    origin: ["https://localhost:3000", "https://YOUR-LOCAL-IP-ADDRESS:3000"],
    methods: ["GET", "POST"],
    credentials: true,
  },
})
export class SignalingGateway
  implements OnGatewayConnection, OnGatewayDisconnect
{
  @WebSocketServer() server: Server;
  private offers: Offer[] = [];
  private connectedSockets: ConnectedSocket[] = [];
}

What Are ICE Candidates?

// Connection handler
handleConnection(socket: Socket) {
  const userName = socket.handshake.auth.userName;
  const password = socket.handshake.auth.password;

  if (password !== 'x') {
    socket.disconnect(true);
    return;
  }

  this.connectedSockets.push({ socketId: socket.id, userName });
  if (this.offers.length) socket.emit('availableOffers', this.offers);
}
// Disconnection handler
handleDisconnect(socket: Socket) {
  this.connectedSockets = this.connectedSockets.filter(
    (s) => s.socketId !== socket.id,
  );
  this.offers = this.offers.filter((o) => o.socketId !== socket.id);
}

// New offer handler
@SubscribeMessage('newOffer')
handleNewOffer(socket: Socket, newOffer: any) {
  const userName = socket.handshake.auth.userName;
  const newOfferEntry: Offer = {
    offererUserName: userName,
    offer: newOffer,
    offerIceCandidates: [],
    answererUserName: null,
    answer: null,
    answererIceCandidates: [],
    socketId: socket.id,
  };

  this.offers = this.offers.filter((o) => o.offererUserName !== userName);
  this.offers.push(newOfferEntry);
  socket.broadcast.emit('newOfferAwaiting', [newOfferEntry]);
}
// Answer handler with ICE candidate acknowledgment
@SubscribeMessage('newAnswer')
async handleNewAnswer(socket: Socket, offerObj: any) {
  const userName = socket.handshake.auth.userName;
  const offerToUpdate = this.offers.find(
    (o) => o.offererUserName === offerObj.offererUserName,
  );

  if (!offerToUpdate) return;

  // Send existing ICE candidates to answerer
  socket.emit('existingIceCandidates', offerToUpdate.offerIceCandidates);

  // Update offer with answer information
  offerToUpdate.answer = offerObj.answer;
  offerToUpdate.answererUserName = userName;
  offerToUpdate.answererSocketId = socket.id;

  // Notify both parties
  this.server
    .to(offerToUpdate.socketId)
    .emit('answerResponse', offerToUpdate);
  socket.emit('answerConfirmation', offerToUpdate);
}
// ICE candidate handler with storage
@SubscribeMessage('sendIceCandidateToSignalingServer')
handleIceCandidate(socket: Socket, iceCandidateObj: any) {
  const { didIOffer, iceUserName, iceCandidate } = iceCandidateObj;

  // Store candidate in the offer object
  const offer = this.offers.find((o) =>
    didIOffer
      ? o.offererUserName === iceUserName
      : o.answererUserName === iceUserName,
  );

  if (offer) {
    if (didIOffer) {
      offer.offerIceCandidates.push(iceCandidate);
    } else {
      offer.answererIceCandidates.push(iceCandidate);
    }
  }

  // Forward candidate to other peer
  const targetUserName = didIOffer
    ? offer?.answererUserName
    : offer?.offererUserName;
  const targetSocket = this.connectedSockets.find(
    (s) => s.userName === targetUserName,
  );

  if (targetSocket) {
    this.server
      .to(targetSocket.socketId)
      .emit('receivedIceCandidateFromServer', iceCandidate);
  }
}

Offer Handler

Answer Handler

ICE Candidate Handler

npm run start:dev

Frontend Logic

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>WebRTC with NestJS Signaling</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script>
      // Request camera permission immediately
      document.addEventListener("DOMContentLoaded", async () => {
        try {
          const stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: "user" }, // Front camera on mobile
            audio: false,
          });
          stream.getTracks().forEach((track) => track.stop());
        } catch (err) {
          console.log("Pre-permission error:", err);
        }
      });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row mb-3 mt-3 justify-content-md-center">
        <div id="user-name" class="col-12 text-center mb-2"></div>
        <button id="call" class="btn btn-primary col-3">Start Call</button>
        <div id="answer" class="col-6"></div>
      </div>
      <div id="videos">
        <div id="video-wrapper">
          <div id="waiting">Waiting for answer...</div>
          <video
            class="video-player"
            id="local-video"
            autoplay
            playsinline
            muted
          ></video>
        </div>
        <video
          class="video-player"
          id="remote-video"
          autoplay
          playsinline
        ></video>
      </div>
    </div>
    <!-- Socket.io client library -->
    <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
    <script src="scripts.js"></script>
    <script src="socketListeners.js"></script>
  </body>
</html>

#videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}
.video-player {
  background-color: black;
  width: 100%;
  height: 300px;
  border-radius: 8px;
}
#video-wrapper {
  position: relative;
}
#waiting {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
#answer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#user-name {
  font-weight: bold;
  font-size: 1.2em;
}

const userName = "User-" + Math.floor(Math.random() * 1000);
const password = "x";
document.querySelector("#user-name").textContent = userName;
const localIp = "YOUR-LOCAL-IP-ADDRESS";
const socket = io(`https://${localIp}:8181`, {
  auth: { userName, password },
  transports: ["websocket"],
  secure: true,
  rejectUnauthorized: false,
});
// DOM Elements
const localVideoEl = document.querySelector("#local-video");
const remoteVideoEl = document.querySelector("#remote-video");
const waitingEl = document.querySelector("#waiting");
// WebRTC Configuration
const peerConfiguration = {
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
  iceTransportPolicy: "all",
};
// WebRTC Variables
let localStream;
let remoteStream;
let peerConnection;
let didIOffer = false;

// Core Functions
const startCall = async () => {
  try {
    await getLocalStream();
    await createPeerConnection();
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    didIOffer = true;
    socket.emit("newOffer", offer);
    waitingEl.style.display = "block";
  } catch (err) {
    console.error("Call error:", err);
  }
};
const answerCall = async (offerObj) => {
  try {
    await getLocalStream();
    await createPeerConnection(offerObj);
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    // Get existing ICE candidates from server
    const offerIceCandidates = await new Promise((resolve) => {
      socket.emit(
        "newAnswer",
        {
          ...offerObj,
          answer,
          answererUserName: userName,
        },
        resolve
      );
    });
    // Add pre-existing ICE candidates
    offerIceCandidates.forEach((c) => {
      peerConnection
        .addIceCandidate(c)
        .catch((err) => console.error("Error adding ICE candidate:", err));
    });
  } catch (err) {
    console.error("Answer error:", err);
  }
};
const getLocalStream = async () => {
  const constraints = {
    video: {
      facingMode: "user",
      width: { ideal: 1280 },
      height: { ideal: 720 },
    },
    audio: false,
  };
  try {
    localStream = await navigator.mediaDevices.getUserMedia(constraints);
    localVideoEl.srcObject = localStream;
    localVideoEl.play().catch((e) => console.log("Video play error:", e));
  } catch (err) {
    alert("Camera error: " + err.message);
    throw err;
  }
};
const createPeerConnection = async (offerObj) => {
  peerConnection = new RTCPeerConnection(peerConfiguration);
  remoteStream = new MediaStream();
  remoteVideoEl.srcObject = remoteStream;
  // Add local tracks
  localStream.getTracks().forEach((track) => {
    peerConnection.addTrack(track, localStream);
  });
  // ICE Candidate handling
  peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
      socket.emit("sendIceCandidateToSignalingServer", {
        iceCandidate: event.candidate,
        iceUserName: userName,
        didIOffer,
      });
    }
  };
  // Track handling
  peerConnection.ontrack = (event) => {
    event.streams[0].getTracks().forEach((track) => {
      if (!remoteStream.getTracks().some((t) => t.id === track.id)) {
        remoteStream.addTrack(track);
      }
    });
    waitingEl.style.display = "none";
  };
  // Connection state handling
  peerConnection.onconnectionstatechange = () => {
    console.log("Connection state:", peerConnection.connectionState);
    if (peerConnection.connectionState === "failed") {
      alert("Connection failed! Please try again.");
    }
  };
  // Set remote description if answering
  if (offerObj) {
    await peerConnection
      .setRemoteDescription(offerObj.offer)
      .catch((err) => console.error("setRemoteDescription error:", err));
  }
};
// Event Listeners
document.querySelector("#call").addEventListener("click", startCall);

// Handle available offers
socket.on("availableOffers", (offers) => {
  console.log("Received available offers:", offers);
  createOfferElements(offers);
});
// Handle new incoming offers
socket.on("newOfferAwaiting", (offers) => {
  console.log("Received new offers awaiting:", offers);
  createOfferElements(offers);
});
// Handle answer responses
socket.on("answerResponse", (offerObj) => {
  console.log("Received answer response:", offerObj);
  peerConnection
    .setRemoteDescription(offerObj.answer)
    .catch((err) => console.error("setRemoteDescription failed:", err));
  waitingEl.style.display = "none";
});
// Handle ICE candidates
socket.on("receivedIceCandidateFromServer", (iceCandidate) => {
  console.log("Received ICE candidate:", iceCandidate);
  peerConnection
    .addIceCandidate(iceCandidate)
    .catch((err) => console.error("Error adding ICE candidate:", err));
});
// Handle existing ICE candidates
socket.on("existingIceCandidates", (candidates) => {
  console.log("Receiving existing ICE candidates:", candidates);
  candidates.forEach((c) => {
    peerConnection
      .addIceCandidate(c)
      .catch((err) =>
        console.error("Error adding existing ICE candidate:", err)
      );
  });
});
// Helper function to create offer buttons
function createOfferElements(offers) {
  const answerEl = document.querySelector("#answer");
  answerEl.innerHTML = ""; // Clear existing buttons
  offers.forEach((offer) => {
    const button = document.createElement("button");
    button.className = "btn btn-success";
    button.textContent = `Answer ${offer.offererUserName}`;
    button.onclick = () => answerCall(offer);
    answerEl.appendChild(button);
  });
}

• Real-time candidates by “receivedIceCandidateFromServer”
• Previously exchanged candidates by “existingIceCandidates”

{
  "name": "webrtc-client",
  "version": "1.0.0",
  "scripts": {
    "start": "http-server -S -C cert.crt -K cert.key -p 3000"
  },
  "dependencies": {
    "http-server": "^14.1.1"
  }
}

npm install
npm start

Testing

Common Issues

Conclusion

XAML Improvements

.NET MAUI TreeDataGrid

Vision AI with .NET MAUI

 

GitHub Copilot Productivity

Modern AI is big opportunity to streamline and automate developer workflows for better productivity. GitHub Copilot is already one of the most popular and productive coding assistants for developers—an AI pair programmer that helps developers write better code. The AI experience is getting better in both VS Code/Visual Studio, and Leslie Richardson wrote up the announcement—improved productivity using GitHub Copilot for .NET developers.
The Visual Studio 17.14 GA release and recent C# Dev Kit releases for VS Code have introduced a whole new batch of GitHub Copilot features designed to make the .NET development experience more efficient and productive. The pair programmer paradigm is quickly shifting to peer programming—supercharged Agent modes are now the default, with support for full Model Context Protocol (MCP) specs. There is improved context awareness with existing code and freshness in coding responses with integrated MSFT Learn, along with added support for easy documentation. To the stars for developer productivity with GitHub Copilot.

.NET Aspire Basics

Most modern apps are not giant monoliths anymore. Instead, application stacks are made up of bite-sized microservices, each isolated and deployed separately to make up parts of digital confetti. While such cloud native architectures bring better resiliency and configurability, the cognitive load is also real—this is where .NET Aspire shines. Dave Brock has started a five-part exploratory series on .NET Aspire, and the first post is out—what is .NET Aspire.
Microservices architectures have big benefits, like on-demand infrastructure, independent deployments and self-healing resilience. But there is a cost to pay in terms of complexity, dependencies and lots of configurations. With .NET Aspire, developers get an opinionated toolkit that brings together best practices around service discovery, health checks, telemetry, secret management and more, all with easy built-in defaults.
This should be an enthralling series that dives into all the different wire-ups and orchestrations on offer—a better understanding of .NET Aspire for developers.

That’s it for now.
We’ll see you next week with more awesome content relevant to .NET MAUI.
Cheers, developers!

Adding Environment Files

ng generate environments

export const environment = {
  production: false,
  openaiApiKey: 'YOUR_DEV_API_KEY',
  openaiApiUrl: 'https://api.openai.com/v1',
};

Adding Service

ng g s open-ai

private http = inject(HttpClient);
private apiKey = environment.openaiApiKey;
private apiUrl = environment.openaiApiUrl;

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideRouter(routes)
  ]
};

private promptSignal = signal<string>('');

setPrompt(prompt: string) {
    this.promptSignal.set(prompt);
  }

  responseResource = httpResource<any>(() => ({
    url: this.apiUrl + '/chat/completions',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`
    },
    body: {
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: this.promptSignal() }]
    }
  }));

Adding Component

ng g c openaichat

  prompt = signal("What is Angular ?");
  openaiservice = inject(OpenAi);
  response: any;

getResponse() {
    this.response = this.openaiservice.setPrompt(this.prompt());
  }

<label for="prompt">Enter your question:</label>
    <input 
      id="prompt" 
      type="text" 
      [value]="prompt()" 
      (input)="prompt.set($any($event.target).value)"
      placeholder="Ask me anything..."
    />

• The (input) event binding is used to listen for real-time changes to the input element’s value.
• When the event fires, the set() method is called to update the prompt signal.
• $any($event.target) casts the event target to any, bypassing TypeScript’s strict type checking.

    <button (click)="getResponse()">
      Get Regular Response
    </button>

@if (openaiservice.responseResource.value()?.choices?.[0]?.message?.content) {
        <p>{{ openaiservice.responseResource.value().choices[0].message.content }}</p>
      } @else {
        <p class="placeholder">No regular response yet...</p>
      }

Working with Streaming Response

1. Regular response
2. Streaming response

  private apiKey = environment.openaiApiKey;
  private apiUrl = environment.openaiApiUrl;

  private streamingResponseSignal = signal<string>('');

  get streamingResponse() {
    return this.streamingResponseSignal.asReadonly();
  }

async streamChatCompletion(prompt: string): Promise<void> { } 

1. Send a request to OpenAI to receive a streaming response.
2. Parse the incoming stream and update the streamingResponseSignal with the content.

const response = await fetch(this.apiUrl + '/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${this.apiKey}`
        },
        body: JSON.stringify({
          model: 'gpt-3.5-turbo',
          messages: [{ role: 'user', content: prompt }],
          stream: true // Enable streaming
        })
      });

1. Read the stream using the getReader.
2. Decode it using the TextDecoder.
3. Add the decoded line to the response signal.

  const reader = response.body?.getReader();
      const decoder = new TextDecoder();

      if (!reader) {
        throw new Error('Failed to get response reader');
      }

      let accumulatedResponse = '';

      while (true) {
        const { done, value } = await reader.read();
        
        if (done) break;

        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
      
            if (data === '[DONE]') {
              return;
            }

            try {
              const parsed = JSON.parse(data);
              const content = parsed.choices?.[0]?.delta?.content;
              
              if (content) {
                accumulatedResponse += content;
                this.streamingResponseSignal.set(accumulatedResponse);
              }
            } catch (e) {
              continue;
            }
          }
        }
      }

1. It reads the response body using the getReader().
2. Next, it uses TextDecoder to convert binary data into a string.
3. Then, chunks are split into lines if they start with "data:".
4. Finally, it parses the data for the content using JSON.parse.

import { Injectable, signal } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class StreamingChatService {
  private apiKey = environment.openaiApiKey;
  private apiUrl = environment.openaiApiUrl;

  private streamingResponseSignal = signal<string>('');

  get streamingResponse() {
    return this.streamingResponseSignal.asReadonly();
  }

  async streamChatCompletion(prompt: string): Promise<void> {
    this.streamingResponseSignal.set('');
    
    try {
      const response = await fetch(this.apiUrl + '/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${this.apiKey}`
        },
        body: JSON.stringify({
          model: 'gpt-3.5-turbo',
          messages: [{ role: 'user', content: prompt }],
          stream: true // Enable streaming
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();

      if (!reader) {
        throw new Error('Failed to get response reader');
      }

      let accumulatedResponse = '';

      while (true) {
        const { done, value } = await reader.read();
        
        if (done) break;

        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
      
            if (data === '[DONE]') {
              return;
            }

            try {
              const parsed = JSON.parse(data);
              const content = parsed.choices?.[0]?.delta?.content;
              
              if (content) {
                accumulatedResponse += content;
                this.streamingResponseSignal.set(accumulatedResponse);
              }
            } catch (e) {
              continue;
            }
          }
        }
      }
    } catch (error) {
      console.error('Streaming error:', error);
      this.streamingResponseSignal.set('Error occurred while streaming response');
    }
  }
} 

  async getStreamingResponse() {
    this.isStreaming.set(true);
    await this.streamingService.streamChatCompletion(this.prompt());
    this.isStreaming.set(false);
  }

<button (click)="getStreamingResponse()" [disabled]="isStreaming()">
      {{ isStreaming() ? 'Streaming...' : 'Get Streaming Response' }}
</button>

@if (streamingService.streamingResponse()) {
        <p>{{ streamingService.streamingResponse() }}</p>
      } @else {
        <p class="placeholder">No streaming response yet...</p>
      }

What Is C# Markup and How to Install It in Your Project?

1. Install the CommunityToolkit.Maui.Markup NuGet package.
2. Navigate to the MauiProgram.cs file and add the UseMauiCommunityToolkitMarkup() method, as shown below:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkitMarkup()
            ...
}

Simplifying Code with C# Markup

<Grid HorizontalOptions="Center" RowDefinitions="0.333*,0.333*,0.333*">

    <Label
        Grid.Row="0"
        FontSize="16"
        Text="Text 1"
        TextColor="#333"
        VerticalOptions="Center" />

    <Label
        Grid.Row="1"
        FontSize="16"
        Text="Text2"
        TextColor="#333"
        VerticalOptions="Center" />

    <Label
        Grid.Row="2"
        FontSize="16"
        Text="Text 3"
        TextColor="#333"
        VerticalOptions="Center" />
</Grid>

public class MarkupPage : ContentPage
{
    public MarkupPage()
    {
        var label1 = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            Text = "Text 1",
            TextColor = Color.FromArgb("#333")
        };

        var label2 = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            Text = "Text 2",
            TextColor = Color.FromArgb("#333")
        };

        var label3 = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            Text = "Text 3",
            TextColor = Color.FromArgb("#333")
        };

        var grid = new Grid
        {                
            HorizontalOptions = LayoutOptions.Center,         
            RowDefinitions =
            {
                new RowDefinition { Height = new GridLength(0.333, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(0.3333, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(0.333, GridUnitType.Star) }
            }                
        };

        grid.Add(label1, 0, 0);
        grid.Add(label2, 0, 1);
        grid.Add(label3, 0, 2);

        Content = grid;            
    }
}

var grid = new Grid
{                
    HorizontalOptions = LayoutOptions.Center,                   
    RowDefinitions = Rows.Define(Stars(0.333), Stars(0.3333), Stars(0.333))
};    

var label1 = new Label()
    .FontSize(16)
    .TextColor(Color.FromArgb("#333"))
    .Text("Text 1")
    .CenterVertical();

var label2 = new Label()
    .FontSize(16)
    .TextColor(Color.FromArgb("#333"))
    .Text("Text 2")
    .CenterVertical();

var label3 = new Label()
    .FontSize(16)
    .TextColor(Color.FromArgb("#333"))
    .Text("Text 3")
    .CenterVertical();

Data Binding Using C# Markup

<Border
    Background="LightBlue"
    HeightRequest="500"
    StrokeShape="RoundRectangle 12"
    WidthRequest="250">
    <Grid HorizontalOptions="Center" RowDefinitions="*,*,*,*">
        <Entry
            Grid.Row="0"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Number1}"
            TextColor="#333"
            VerticalOptions="Center" />

        <Entry
            Grid.Row="1"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Number2}"
            TextColor="#333"
            VerticalOptions="Center" />

        <Entry
            Grid.Row="2"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Result}"
            TextColor="#333"
            VerticalOptions="Center" />

        <Button
            Grid.Row="3"
            Command="{Binding AddNumbersCommand}"
            FontSize="16"
            Text="Calculate"
            TextColor="#333"
            VerticalOptions="Center" />
    </Grid>
</Border>

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    int number1 = 25;
    [ObservableProperty]
    int number2 = 25;
    [ObservableProperty]
    int result = 50;

    [RelayCommand]
    public void AddNumbers()
    {
        Result = Number1 + Number2;
    }
}

public MarkupPage()
{            
    var viewModel = new MainViewModel();
    var entry1 = new Entry()
        .FontSize(16)
        .TextCenterHorizontal()
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    entry1.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Number1), source: viewModel));                        

    var entry2 = new Entry()
        .FontSize(16)
        .TextCenterHorizontal()
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    entry2.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Number2), source: viewModel));                        

    var entryResult = new Entry()
        .FontSize(16)
        .TextCenterHorizontal()
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    entryResult.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Result), source: viewModel));                        

    var calculateButton = new Button()
        .FontSize(16)
        .Text("Calculate")
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    calculateButton.SetBinding(Button.CommandProperty, new Binding(nameof(MainViewModel.AddNumbersCommand), source: viewModel));                        

    var grid = new Grid
    {
        HorizontalOptions = LayoutOptions.Center,
        RowDefinitions = Rows.Define(Star, Star, Star, Star)
    };

    grid.Children.Add(entry1);
    Grid.SetRow(entry1, 0);

    grid.Children.Add(entry2);
    Grid.SetRow(entry2, 1);

    grid.Children.Add(entryResult);
    Grid.SetRow(entryResult, 2);

    grid.Children.Add(calculateButton);
    Grid.SetRow(calculateButton, 3);

    var border = new Border()
    {
        StrokeShape = new RoundRectangle { CornerRadius = 12 },
        Content = grid
    }
    .BackgroundColor(Colors.LightBlue)
    .Height(500)
    .Width(250);

    Content = new StackLayout()
    {
        Children = { border }                
    }
    .CenterVertical()
    .CenterHorizontal();

    BindingContext = viewModel;
}